JSON-boom
Verken JSON als een inklapbare boom met type-badges, JSON Pointer-paden en zoekfunctie
JSON
Boom
Plak JSON aan de linkerkant en klik op Boom bouwen.
JSON-boom
Verken JSON als een inklapbare boom met type-badges, JSON Pointer-paden en zoekfunctie
Functies
- Recursieve inklapbare boom: elk object- en array-knoop heeft een eigen uitklap/inklap-toggle, wortel is standaard uitgeklapt zodat structuur direct zichtbaar is
- Per-knoop JSON Pointer (RFC 6901) — hover over een sleutel om het volledige pad te zien, klik op het keten-icoon om te kopiëren voor gebruik in patches, diffs of schema instancePath
- Type-bewuste badges kleuren elke knoop volgens werkelijk type (string / number / boolean / null / array / object) — null wordt niet meer verstopt achter typeof 'object'
- Voorbeeldkolom toont één-regel-samenvatting: scalairen inline, arrays als `[ N ]` met elementaantal, objecten als `{ N }` met sleutelaantal — grootte scanbaar vóór uitklappen
- Zoekfilter matcht op sleutelnamen, JSON Pointer-paden en voorbeeldtekst; de boom klapt in tot alleen takken met hits — lookups in 10MB-documenten haalbaar
- Waarde-kopiëren-knop schrijft de knoopwaarde naar het klembord — strings als ruwe tekst, complexe types als pretty-print JSON klaar om in een andere tool te plakken
- Parsefouten bevatten de volledige JavaScript-engine-melding (vaak met regel/kolominfo) zodat je de invoer kunt repareren in plaats van te gokken
- Puur client-side: invoer verlaat de browser niet, hele boom wordt in geheugen opgebouwd, geen telemetrie, en de pagina werkt offline na cachen
Hoe te gebruiken
- Plak JSON in het linker tekstvak of klik Voorbeeld laden voor een klein voorbeeld.
- Druk Boom bouwen. De wortel wordt uitgeklapt getoond; klik de chevron naast een object/array-knoop om dieper te gaan.
- Gebruik de zoekbox om te filteren op sleutelnaam, waarde of JSON Pointer-pad — alleen matchende takken blijven zichtbaar.
- Hover over een sleutel om het JSON Pointer-pad in de tooltip te zien; klik het keten-icoon om te kopiëren.
- Klik het kopieer-icoon om de waarde van de knoop te krijgen — scalairen ruw, objecten/arrays als pretty-print JSON.
- Gebruik Alles uitklappen / Alles inklappen om de hele boom in één keer te flippen.
Tips en best practices
- Houd Shift ingedrukt bij klik op een toggle om hele takken sneller in/uit te klappen — wanneer de OS-shortcut is gemapt, blijft de toggle-knop individueel werken.
- Zoek op een waarde (niet alleen een sleutel) tijdens debuggen — voorbeeldtekst is in de match opgenomen.
- Kopieer een JSON Pointer hier en plak in het foutenrapport van JSON Schema Validator om de exacte knoop te bevestigen die validatie brak.
- Als de boom traag aanvoelt, klap de grootste array eerst in — lange arrays domineren de renderkosten.
- Combineer met JSON Diff: kopieer een waarde voor/na een verandering om de precieze knoop-niveau-bewerking te zien.
Veelgestelde vragen
Wat is een JSON Pointer en hoe gebruik je het?
Een JSON Pointer (RFC 6901) is een slash-gescheiden pad dat precies één knoop in een JSON-document benoemt: `/owner/name` is het name-veld van het owner-object; `/tags/1` is het tweede element van de tags-array. De wortel is de lege string (hier als `/`). Deze tool gebruikt hetzelfde formaat als JSON Schema instancePath-fouten en tools als fast-json-patch, dus je kunt een pointer hier kopiëren en elders als directe referentie gebruiken.
Hoe verschilt de type-badge van JavaScripts typeof?
Op twee manieren. Eerst, null toont als 'null' (typeof null === 'object' in JavaScript — een oude bug). Tweede, arrays tonen als 'array' in plaats van typeofs 'object', omdat ze anders renderen en zich anders gedragen. Dit komt overeen met de zes waardetypes in de JSON-spec: string, number, boolean, null, array, object.
Hoe werkt zoeken?
De query wordt hoofdletter-ongevoelig gematcht tegen de sleutel, JSON Pointer-pad en de voorbeeld-string van de knoop. Een tak blijft zichtbaar als hij of een afstammeling matcht — dus je kunt zoeken naar een diep geneste waarde en nog steeds de sleutels op het pad ernaartoe zien. Leeg de box om de volledige boom te herstellen.
Kan het zeer grote JSON aan?
Het bouwt de hele boom eenmalig in geheugen, dus megabyte-schaal documenten renderen comfortabel. Honderden megabytes JSON kan krap zijn op telefoons met weinig RAM; voor dat bereik liever streaming-tools of draai JSON Minify eerst om whitespace te verwijderen. Rendering is niet gevirtualiseerd — elke zichtbare knoop rendert naar een DOM-element — dus grote takken inklappen is de truc als het traag aanvoelt.
Verliest een knoop inklappen zijn data?
Nee. Inklappen is puur visueel — het onderliggende geparseerde object blijft in geheugen, dus opnieuw uitklappen toont dezelfde inhoud direct. Zoeken negeert inklap-staat en onthult hits binnen ingeklapte knopen.
Waarom toont de voorbeeld `{ 0 }` voor een leeg object?
Het getal in accolades is het sleutelaantal voor objecten en de lengte voor arrays. Nul-sleutel-objecten en nul-lengte-arrays zijn geldig JSON en niet dezelfde waarde (`{}` vs `[]`), dus tonen van het aantal en de accolades maakt type en grootte in één oogopslag duidelijk.
Wat is het verschil met de boomweergave in JSON Formatter?
De boom van JSON Formatter is één van vele tabs (naast pretty-print, JSONPath, schema-validatie, transformaties, diff). Deze tool is de standalone alleen-boom-weergave: één URL, één taak, dieper interactie per knoop (type-badges, per-knoop pointer-kopie, per-knoop waarde-kopie) zonder het formatteren/transformatie/validatie-oppervlak.
Wordt er iets naar een server gestuurd?
Nee. De JSON blijft in je browser, parseren en boombouw lopen synchroon in dezelfde JavaScript-context die de pagina renderde, en het Netwerk-tabblad toont geen verzoeken bij klik op Boom bouwen. Na eerste laden werkt de pagina offline.