JSON-Baum
Erkunden Sie JSON als einklappbaren Baum mit Typ-Badges, JSON-Pointer-Pfaden und Suche
JSON
Baum
Fügen Sie links JSON ein und drücken Sie Baum aufbauen.
JSON-Baum
Erkunden Sie JSON als einklappbaren Baum mit Typ-Badges, JSON-Pointer-Pfaden und Suche
Funktionen
- Rekursiver einklappbarer Baum: jedes Objekt- und Array-Knoten hat einen eigenen Aufklapp-/Einklapp-Schalter, Wurzel ist standardmäßig aufgeklappt für sofort sichtbare Struktur
- Pro Knoten JSON-Pointer (RFC 6901) — fahren Sie über einen Schlüssel, um den vollen Pfad zu sehen, klicken Sie das Ketten-Symbol, um ihn für Patches, Diffs oder Schema instancePaths zu kopieren
- Typ-bewusste Badges färben jeden Knoten nach seinem echten Typ (string / number / boolean / null / array / object) — null wird nicht mehr hinter JavaScript's typeof 'object' versteckt
- Vorschau-Spalte zeigt eine Zeilenzusammenfassung: skalare Werte inline, Arrays als `[ N ]` mit Elementanzahl, Objekte als `{ N }` mit Schlüsselanzahl — Größe vor dem Ausklappen scannbar
- Suchfilter trifft auf Schlüsselnamen, JSON-Pointer-Pfade und Vorschautext; der Baum klappt auf nur Zweige zusammen, die einen Treffer enthalten — Lookups in 10-MB-Dokumenten machbar
- Wert-kopieren-Schaltfläche schreibt den Knoten-Wert in die Zwischenablage — Strings als Rohtext, komplexe Typen als pretty-printed JSON bereit zum Einfügen in ein anderes Tool
- Parsefehler enthalten die volle JavaScript-Engine-Meldung (oft mit Zeile/Spalte-Info), damit Sie die Eingabe reparieren statt zu raten
- Rein clientseitig: Eingabe verlässt den Browser nicht, der gesamte Baum wird im Speicher gebaut, keine Telemetrie, und die Seite funktioniert offline nach dem Cachen
Anleitung
- JSON in das linke Textfeld einfügen oder Beispiel laden für ein kleines Beispiel klicken.
- Baum aufbauen drücken. Die Wurzel wird ausgeklappt gezeigt; klicken Sie das Chevron neben einem Objekt-/Array-Knoten, um tiefer zu gehen.
- Suchbox nutzen, um nach Schlüsselname, Wert oder JSON-Pointer-Pfad zu filtern — nur passende Zweige bleiben sichtbar.
- Über einen Schlüssel hovern, um seinen JSON-Pointer-Pfad im Tooltip zu sehen; das Ketten-Symbol klicken, um ihn zu kopieren.
- Das Kopier-Symbol klicken, um den Knoten-Wert zu erhalten — Skalare roh, Objekte/Arrays als pretty-printed JSON.
- Alle ausklappen / Alle einklappen verwenden, um den ganzen Baum auf einmal umzuschalten.
Tipps & Best Practices
- Halten Sie Shift beim Klicken eines Schalters, um ganze Zweige schneller ein-/auszuklappen — wenn der OS-Shortcut gemappt ist, funktioniert die Schalter-Taste weiter einzeln.
- Suchen Sie beim Debuggen nach einem Wert (nicht nur Schlüssel) — Vorschautext ist in der Übereinstimmung enthalten.
- Kopieren Sie hier einen JSON-Pointer und fügen Sie ihn in den Fehlerbericht des JSON-Schema-Validators ein, um genau den Knoten zu bestätigen, der die Validierung brach.
- Wenn der Baum träge wirkt, das größte Array zuerst einklappen — lange Arrays dominieren die Renderkosten.
- Mit JSON Diff koppeln: Kopieren Sie einen Wert vor/nach einer Änderung, um die präzise Knoten-Ebene-Bearbeitung zu sehen.
FAQ
Was ist ein JSON-Pointer und wie nutzt man ihn?
Ein JSON-Pointer (RFC 6901) ist ein schrägstrich-getrennter Pfad, der genau einen Knoten in einem JSON-Dokument benennt: `/owner/name` ist das name-Feld des owner-Objekts; `/tags/1` ist das zweite Element des tags-Arrays. Die Wurzel ist die leere Zeichenkette (hier als `/` gezeigt). Dieses Tool verwendet dasselbe Format wie JSON Schema instancePath-Fehler und Tools wie fast-json-patch, sodass Sie einen Pointer hier kopieren und andernorts als direkte Referenz verwenden können.
Wie unterscheidet sich das Typ-Badge von JavaScript's typeof?
Auf zwei Arten. Erstens: null zeigt als 'null' (typeof null === 'object' in JavaScript — ein langjähriger Fehler). Zweitens: Arrays zeigen als 'array' statt typeof's 'object', weil sie anders gerendert werden und sich verhalten. Das entspricht den sechs Werttypen der JSON-Spezifikation: string, number, boolean, null, array, object.
Wie funktioniert die Suche?
Die Anfrage wird case-insensitiv gegen den Schlüssel, JSON-Pointer-Pfad und die Vorschau des Knotens abgeglichen. Ein Zweig bleibt sichtbar, wenn er oder ein Nachkomme passt — Sie können also nach einem tief verschachtelten Wert suchen und trotzdem die Schlüssel auf dem Weg dorthin sehen. Box leeren, um den vollen Baum wiederherzustellen.
Kann es sehr großes JSON handhaben?
Es baut den gesamten Baum einmal im Speicher, sodass Megabyte-große Dokumente komfortabel rendern. Mehrere hundert Megabyte JSON kann auf Telefonen mit wenig RAM eng werden; für diesen Bereich nutzen Sie lieber Streaming-Tools oder lassen Sie zuerst JSON Minify laufen, um Whitespace zu entfernen. Rendering ist nicht virtualisiert — jeder sichtbare Knoten wird zu einem DOM-Element — also ist Einklappen großer Zweige der Trick, wenn es träge wirkt.
Verliert das Einklappen eines Knotens seine Daten?
Nein. Einklappen ist rein visuell — das zugrundeliegende geparste Objekt bleibt im Speicher, also zeigt erneutes Aufklappen denselben Inhalt sofort. Die Suche ignoriert den Einklappzustand und enthüllt Treffer in eingeklappten Knoten.
Warum zeigt die Vorschau `{ 0 }` für ein leeres Objekt?
Die Zahl in Klammern ist die Schlüsselanzahl für Objekte und die Länge für Arrays. Null-Schlüssel-Objekte und null-Länge-Arrays sind gültiges JSON und nicht derselbe Wert (`{}` vs `[]`), sodass Anzahl und Klammern Typ und Größe auf einen Blick offensichtlich machen.
Was unterscheidet das von der Baumansicht in JSON Formatter?
JSON Formatters Baum ist einer von vielen Tabs (neben Pretty-Print, JSONPath, Schema-Validierung, Transformationen, Diff). Dieses Tool ist die eigenständige Baum-Nur-Ansicht: eine URL, ein Job, tiefere Interaktion pro Knoten (Typ-Badges, Pro-Knoten-Pointer-Kopie, Pro-Knoten-Wert-Kopie) ohne die Formatier-/Transformations-/Validierungs-Oberfläche.
Wird etwas an einen Server gesendet?
Nein. Das JSON bleibt in Ihrem Browser, Parsing und Baumaufbau laufen synchron im selben JavaScript-Kontext, der die Seite gerendert hat, und der Netzwerk-Tab zeigt keine Anfragen, wenn Sie Baum aufbauen drücken. Nach dem ersten Laden funktioniert die Seite offline.