JSON-Baumansicht

Was ist eine JSON-Baumansicht?#

Eine JSON-Baumansicht parst ein JSON-Dokument und stellt es als einklappbare Gliederung dar, ähnlich wie ein Datei-Explorer einen Verzeichnisbaum anzeigt. Statt eine lange Wand eingerückten Textes zu lesen und Klammern zu zählen, um herauszufinden, was wo verschachtelt ist, sehen Sie die Struktur auf einen Blick: Objekte und Arrays sind Äste, die sich per Klick öffnen und schließen lassen, und die Blattwerte — Strings, Zahlen, Boolesche Werte, null — sitzen an den Spitzen.

Das zählt am meisten, wenn das Dokument tief oder unvertraut ist. Eine einzige API-Antwort kann leicht hunderte Zeilen umfassen; eine Konfigurationsdatei kann Einstellungen enthalten, die vier oder fünf Ebenen tief unter ähnlich klingenden Namen geschachtelt sind. In einem flachen Formatierer scrollen Sie und verlieren den Faden. In einem Baum klappen Sie alles außer dem Ast zusammen, der Sie interessiert, und der Rest konkurriert nicht mehr um Ihre Aufmerksamkeit.

Diese Seite parst Ihr JSON im Browser und rendert Knoten für Knoten einen einklappbaren Baum, wobei der Inhalt als reiner Text geschrieben wird, statt die Eingabe als HTML zu interpretieren — selbst ein Dokument, das <script>-Tags oder HTML-ähnliche Strings enthält, wird also inaktiv angezeigt, nicht ausgeführt.

Verwendung#

1. Fügen Sie Ihr JSON in die Eingabe-Fläche links ein. Das Parsing erfolgt während des Tippens.
2. Der Baum erscheint rechts. Jedes Objekt oder Array zeigt einen ▼-Umschalter, seine öffnende Klammer ({ oder [), die Anzahl der Einträge darin und seine schließende Klammer. Klicken Sie auf den Umschalter — oder auf die Klammern selbst —, um diesen Ast zu falten oder zu entfalten.
3. Verwenden Sie Alle ausklappen, um jeden Ast bis zu seinen Blättern zu öffnen, und Alle einklappen, um das gesamte Dokument wieder auf die Wurzel zusammenzuziehen. Einklappen ist der Weg, um bei einem weitläufigen Payload vor dem Detailgang zuerst einen einzeiligen Überblick zu bekommen.
4. Die Kopfzeile rechts zeigt die Anzahl der Einträge der obersten Ebene der Wurzel (zum Beispiel 5 Elemente), sodass Sie auf einen Blick sehen, wie groß das Dokument ist.
5. Beispiel lädt ein verschachteltes Demonstrationsdokument; Leeren leert beide Flächen.

Eckpunkte#

• Jeden Ast unabhängig falten. Jeder Container öffnet und schließt sich eigenständig, sodass Sie ein Teil-Objekt zum Nachschlagen ausgeklappt lassen können, während der Rest eingeklappt bleibt.
• Tiefenführung. Unterknoten werden unter einer vertikalen Führungslinie eingerückt, sodass auch in dichten Dokumenten sofort offensichtlich ist, zu welcher Klammer ein Eintrag gehört.
• XSS-sichere Darstellung. Jede Beschriftung und jeder Wert wird als reiner Text geschrieben — die Eingabe wird niemals als HTML geparst. Ein bösartig aussehender String wird einfach als Text angezeigt.
• Treue Blattwerte. Strings behalten ihre umschließenden Anführungszeichen und Zahlen erscheinen exakt so, wie JSON.stringify sie schreiben würde, sodass true (boolescher Wert) optisch von "true" (String) zu unterscheiden ist.
• Live-Zähler. Die Kopfzeile meldet, wie viele Einträge die Wurzel enthält, aktuell bei jeder Bearbeitung.

Konkretes Beispiel#

Laden Sie Beispiel und der geparste Baum zeigt ein Wurzelobjekt mit fünf Einträgen der obersten Ebene:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

Zwei dieser Einträge sind selbst Container. Das Entfalten von tags zeigt das dreielementige Array ("json", "encoding", "crypto"), und das Entfalten von features offenbart, dass static true ist, während backend null ist — eine Unterscheidung, die der Baum explizit darstellt, statt Sie bei einem flachen Dump raten zu lassen.

Wenn Sie nur das Teil-Objekt features interessiert, klicken Sie jedes andere ▼ auf der obersten Ebene, um es wegzufalten. Die Zahl 5 an der Wurzel bleibt korrekt, und die Tiefenführung macht offensichtlich, dass static und backend zu features gehören, nicht zur Wurzel.

FAQ#

Verändert oder formatiert das mein JSON neu?#

Nein. Der Baum ist eine Leseansicht des geparsten Wertes. Ihr Eingabetext wird nie neu geschrieben, neu eingerückt oder ausgegeben. Wenn Sie das Dokument als Text formatiert haben möchten, verwenden Sie stattdessen den Formatierer; dieses Werkzeug ist zum Navigieren da, nicht zum Normalisieren.

Warum haben Strings im Baum immer noch Anführungszeichen?#

Weil JSON selbst so einen String von einem bloßen Schlüsselwort unterscheidet. Ohne die Anführungszeichen sähen true und "true" identisch aus, und ebenso null und der String "null". Die Anführungszeichen beizubehalten (genau wie JSON.stringify sie erzeugt) wahrt diese Unterscheidung auf einen Blick.

Wie geht das mit sehr großen Dokumenten um?#

Parsing und Darstellung laufen vollständig in Ihrem Browser ab, daher gibt es keinen Upload und keinen Server-Roundtrip. Für typische Konfigurationen und API-Antworten ist es augenblicklich. Bei einem multimegabytegroßen Dokument muss der Baum für jeden Wert einen Knoten anlegen, was träge werden kann — klappen Sie Äste zu, die Sie nicht benötigen, um die Zahl der sichtbaren Knoten beherrschbar zu halten.

Wird ein String, der HTML enthält, als HTML gerendert?#

Niemals. Das Werkzeug schreibt jeden Wert als Textinhalt, den der Browser als inaktive Zeichen behandelt. Ein String, der zufällig <script> oder <img onerror=...> enthält, wird unverändert als Text angezeigt — er wird nicht als Markup geparst und kann nichts ausführen.