JSON-Visualisierer
JSON-Daten als interaktiven Baum oder Tabelle erkunden
Rohes JSON ist für Maschinen gedacht, und eine echte API-Antwort kann einen einzigen nützlichen Wert fünf Ebenen tief vergraben. Der JSON-Visualizer verwandelt jede Payload in einen interaktiven, einklappbaren Baum oder eine flache, scrollbare Tabelle und zeigt daneben strukturelle Statistiken. Er akzeptiert nur Standard-JSON und läuft vollständig im Browser, was ihn bequem macht, um unbekannte API-Antworten oder exportierte Konfigurationsdateien einzufügen und ihre Form zu erkunden.
Baumansicht vs. Tabellenansicht
Die Baumansicht bewahrt die Hierarchie. Objekte und Arrays werden zu aufklappbaren Zweigen, beschriftet mit Typ und Anzahl der Kindelemente; ein Klick klappt einen Zweig zu oder auf. Diese Ansicht ist die richtige, wenn Sie das Schema noch nicht kennen, weil sie die Verschachtelung so zeigt, wie sie ist.
Die Tabellenansicht flacht dieselben Daten zu Zeilen aus Schlüsselpfad, Wert und Typ ab. Sie verwirft die Form zugunsten einer Liste, die man direkt von oben nach unten lesen kann. Das ist die bessere Wahl, sobald Sie ungefähr wissen, wonach Sie suchen, und viele Werte vergleichen müssen, oder wenn Sie Datensätze auf null-Werte und Typfehler prüfen wollen.
Die Statistiken werden einmal pro Parse berechnet und bleiben beim Wechsel der Ansicht gleich.
So visualisieren Sie eine Payload
- JSON in das Eingabefeld einfügen und auf Visualisieren klicken – oder einfügen und den Button klicken, falls das Panel bereits offen ist.
- Lässt sich der Text parsen, erscheint das Ergebnispanel mit standardmäßig ausgewählter Baumansicht.
- Klappen Sie die Zweige auf, die Sie interessieren, oder wechseln Sie in die Tabellenansicht für eine flache Auflistung.
- Lesen Sie die Statistikzeile oben rechts: maximale Tiefe, Schlüsselanzahl und Typverteilung.
- Bei jeder Änderung der Quelle erneut einfügen und visualisieren.
Nichts wird an einen Server gesendet. Parsen, Abflachen und Rendern geschehen vollständig in der Seite, sodass interne oder sensible Payloads niemals Ihren Rechner verlassen.
Das Statistik-Panel lesen
- Max. Tiefe ist die tiefste Verschachtelungsebene und markiert Schemata, die stärker geschichtet sind als erwartet.
- Schlüsselanzahl summiert Objektschlüssel und Array-Indizes und gibt ein grobes Gefühl für die Größe der Payload.
- Typverteilung zählt, wie viele Blätter Strings, Zahlen, Booleans oder null sind, plus Arrays und Objekte. Eine plötzliche Serie von null-Werten in einem Feld, das Strings enthalten sollte, ist ein einfaches Signal, dass eine Änderung weiter oben die Daten beschädigt hat.
Praxisbeispiel
Nehmen Sie diese Eingabe:
{
"user": { "id": 7, "admin": false, "tags": ["a", "b"] },
"lastLogin": null
}
Die Baumansicht zeigt user als Objekt mit drei Schlüsseln, darunter tags als Array[2], das sich zu "a" und "b" aufklappt, sowie lastLogin als null.
Die Tabellenansicht erzeugt fünf Zeilen:
| Schlüsselpfad | Wert | Typ |
|---|---|---|
| user.id | 7 | number |
| user.admin | false | boolean |
| user.tags.0 | a | string |
| user.tags.1 | b | string |
| lastLogin | null | null |
Die Statistik liest maximale Tiefe 3, Schlüsselanzahl 7 und eine Typverteilung von number: 1, boolean: 1, string: 2, null: 1. Die Schlüsselanzahl sieben zählt user, id, admin, tags, beide Array-Indizes und lastLogin.
Nur gültiges JSON
Der Parser ist JSON.parse und damit strikt. Er lehnt einfache Anführungszeichen, Eigenschaftsnamen ohne Anführungszeichen, nachgestellte Kommas, Kommentare und die nur in JavaScript gültigen Werte NaN, Infinity und undefined ab. Zahlen mit führendem Pluszeichen oder führender Null (außer 0 selbst) sind ebenfalls ungültig. Scheitert ein Dokument, meldet die Fehlermeldung die Position des ersten Problems – meist der schnellste Weg, ein sonst unsichtbares nachgestelltes Komma zu finden. Den Text vorher durch einen Formatierer laufen zu lassen, behebt das Problem oft, bevor er dieses Tool erreicht.
Wann ein anderes Tool sinnvoll ist
Der Visualizer dient dem Verstehen der Form, nicht dem Bearbeiten oder Vergleichen. Sobald Sie wissen, was die Payload enthält, erledigen andere Tools die nächste Aufgabe besser.
- Einen Formatierer nutzen, wenn Sie konsistente Einrückung oder eine schnelle Syntaxkorrektur brauchen.
- Ein Diff-Tool nutzen, wenn Sie zwei Versionen desselben Dokuments haben und genau sehen wollen, welche Felder sich zwischen Umgebungen geändert haben.
- Einen JSON-zu-CSV-Konverter nutzen, wenn die Struktur flach genug für eine Tabellenkalkulation ist.
- Einen Schema-Generator nutzen, wenn Sie aus einer repräsentativen Antwort einen Vertrag machen wollen, gegen den Sie validieren können.
Das Statistik-Panel ist ein natürlicher Übergabepunkt: Notieren Sie die maximale Tiefe und alle Felder mit unerwarteten null-Werten oder falschen Typen, und wechseln Sie dann das Tool, um sie zu korrigieren oder zu validieren. Die Payload im Visualizer zu behalten, während Sie in einem anderen Tab arbeiten, bedeutet außerdem, dass Sie die ursprüngliche Struktur nie aus den Augen verlieren.
Große Payloads und praktische Grenzen
Der Viewer hält die Daten im Speicher und baut die Anzeige daraus auf, sodass wenige Megabyte angenehm sind und Zehntausende Megabyte nicht. Die Baumansicht ist die schwerere Option, weil jeder Container zu einem anklickbaren Element wird; die Tabellenansicht ist leichter, rendert aber weiterhin eine Zeile pro Blattwert. Der Ergebnisbereich ist auf 600 Pixel Höhe begrenzt und scrollt, was die Seite nutzbar hält, aber bedeutet, dass Sie mit dem Auge suchen statt mit einem Filterfeld. Bei sehr großen Dateien ein repräsentatives Objekt oder Array extrahieren und diesen Ausschnitt untersuchen.
Verwandte Tools
Häufig gestellte Fragen
Was genau zählt die Schlüsselanzahl?
Gezählt wird jeder Objektschlüssel und jeder Array-Index. Eine Payload mit einer Objekteigenschaft, drei Unterschlüsseln und einem Array mit zwei Einträgen meldet sechs Schlüssel, weil auch die beiden Array-Positionen zählen. Die Zahl misst strukturelle Einträge, nicht unterschiedliche Feldnamen.
Warum zeigt die Tabellenansicht Überschriften wie orders.0.total?
Die Tabellenansicht flacht die Hierarchie zu punktgetrennten Schlüsselpfaden ab. Objektschlüssel werden mit Punkten verbunden, Array-Positionen mit ihrem numerischen Index, sodass das Total der ersten Bestellung in einem orders-Array als orders.0.total erscheint. Das macht tief verschachtelte Werte in einer Liste lesbar, verdeckt aber die umgebende Struktur.
Warum wurde mein JSON abgelehnt, obwohl es im Editor gültig aussah?
Das Tool nutzt den strikten JSON-Parser des Browsers, der Bequemlichkeiten mancher Editoren ablehnt: einfach zitierte Strings, Schlüssel ohne Anführungszeichen, nachgestellte Kommas, Kommentare sowie NaN, Infinity und undefined sind ungültiges JSON. Im Zweifel die Ausgabe von JSON.stringify einfügen. Die Fehlermeldung zeigt auf das erste problematische Zeichen.
Was sagt mir die maximale Tiefe?
Sie ist die tiefste erreichte Verschachtelungsebene. Ein Wurzelobjekt beginnt bei Tiefe 0, seine direkten Eigenschaften bei Tiefe 1, und jede weitere Ebene zählt eins hinzu. Ein Array auf Wurzelebene wird anders gezählt, weil seine Einträge bei Tiefe 1 beginnen. So erkennen Sie Schemata, die tiefer verschachtelt sind als erwartet.
Kann das Tool einen 50-MB-Export verarbeiten?
Praktikabel ist es bis zu wenigen Megabyte. Die Baumansicht erzeugt für jedes Objekt und Array ein Element, daher kann ein sehr großes Dokument den Browser träge machen, obwohl das Panel scrollt. Für große Daten die Tabellenansicht nutzen (eine Zeile pro Blattwert), eine repräsentative Stichprobe ansehen oder die ganze Datei mit einem Kommandozeilen-Tool verarbeiten.
Warum fehlt ein leeres Objekt in der Tabellenansicht?
Das Abflachen erfasst nur Blattwerte. Ein Objekt ohne Schlüssel hat keine Blätter und erzeugt daher keine Zeilen, obwohl die Baumansicht es weiterhin als leeres Objekt zeigt. Muss ein Feld in der flachen Liste erscheinen, die Abwesenheit explizit mit null statt mit einem leeren Objekt darstellen.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert