JSON-Baum-Betrachter

JSON, das Datenformat, das gewonnen hat

Douglas Crockford veröffentlichte JSON auf json.org im Jahr 2001 als leichtgewichtige Alternative zu XML und übernahm die Syntax direkt aus JavaScripts Objektliteralen. Das Format wurde zuerst als IETF Internet-Draft in RFC 4627 (Juli 2006) standardisiert, dann als RFC 7159 (März 2014) überarbeitet und schließlich in RFC 8259 (Dezember 2017) festgelegt, was der aktuelle Standard ist und mit ECMA-404 (1. Ausgabe Oktober 2013, 2. Ausgabe Dezember 2017) abgeglichen wird. RFC 8259 fügte eine wichtige Anforderung hinzu: die Kodierung auf Netzwerkebene muss UTF-8 sein. Zwei ergänzende Specs runden das Ökosystem ab: RFC 6901 «JSON Pointer» (April 2013) definiert die /store/book/0/title-Syntax zur Adressierung von Knoten innerhalb eines Dokuments, und RFC 6902 «JSON Patch» definiert ein JSON-Dokument, das Änderungen beschreibt, die auf ein anderes JSON-Dokument angewendet werden sollen. JSON Schema (aktueller IETF-Draft 2020-12) fügt Validierung hinzu. Alles andere, was darauf aufbaut, JSONC für Konfigurationsdatei-Kommentare, JSON5 für lockere Syntax, NDJSON für Streaming, kam danach.

Die sechs JSON-Wertetypen (und was fehlt)

RFC 8259 §3 definiert genau sechs Wertetypen. Es gibt nichts anderes.

• Objekt, ungeordneter Satz von Name-Wert-Paaren, durch geschweifte Klammern abgegrenzt. Schlüssel sind immer Strings.
• Array, geordnete Liste von Werten, durch eckige Klammern abgegrenzt. Kann gemischte Typen enthalten.
• String, Unicode-Zeichen in doppelten Anführungszeichen. Einfache Anführungszeichen sind kein legales JSON.
• Zahl, IEEE 754 Doppelpräzisions-Gleitkomma. Die Spec garantiert keine willkürliche Präzision; Zahlen jenseits von Number.MAX_SAFE_INTEGER = 2⁵³ − 1 = 9 007 199 254 740 991 verlieren beim Parsen Präzision.
• true / false, boolesche Literale, Kleinbuchstaben, nicht in Anführungszeichen.
• null, das null-Literal, Kleinbuchstaben, nicht in Anführungszeichen. Ein Schlüssel mit Wert null ist anders als ein abwesender Schlüssel.

Was JSON nicht hat: einen Datumstyp (Konvention ist ein ISO-8601-String mit Zeitzone), Kommentare (verwenden Sie ein separates Metadatenfeld), nachgestellte Kommas, einfach gequotete Strings, hexadezimale Zahlen, undefined, NaN oder Infinity. Jedes davon lässt JSON.parse einen SyntaxError werfen.

Striktes JSON, JSONC, JSON5: was ist was

Striktes JSON (RFC 8259) ist, was dieser Viewer akzeptiert: keine Kommentare, keine nachgestellten Kommas, doppelt gequotete Schlüssel, doppelt gequotete Strings. JSONC ist eine Microsoft-Konvention, die in VS Code ausgeliefert wird und Zeilenkommentare // und Blockkommentare /* ... */ erlaubt, während alles andere strikt bleibt; Sie sehen es in tsconfig.json, .vscode/settings.json und im npm-Paket jsonc-parser. JSON5 (2017, https://json5.org) ist eine Obermenge, die einfach gequotete Strings, ungequotete Schlüssel, nachgestellte Kommas, hexadezimale Zahlen, IEEE 754 spezielle Werte (NaN, Infinity) und sowohl Zeilen- als auch Blockkommentare hinzufügt; das npm-Paket json5 hat etwa 10 Millionen wöchentliche Downloads. NDJSON / JSON Lines (https://jsonlines.org) ist eine Streaming-Variante, bei der jede Zeile ein unabhängiges JSON-Dokument ist, verwendet von Log-Shippers und Big-Data-Ingestion-Pipelines. Entfernen Sie Kommentare und nachgestellte Kommas vor dem Einfügen, wenn Ihre Quelle JSONC oder JSON5 ist.

Wo ein Baum-Viewer wirklich sein Geld verdient

• API-Antwort-Inspektion. Stripe, GitHub, Slack, Twilio: jede moderne API gibt verschachteltes JSON zurück. Das Einfügen in einen Baum-Viewer macht die Form offensichtlich.
• Konfigurationsdateien. package.json, tsconfig.json, composer.json, kubeconfig und der lange Schwanz von Cloud-Provider-JSON-Configs werden alle leichter als Baum zu auditieren.
• Datenbank-Export-Inspektion. MongoDB find()-Ausgabe, PostgreSQL row_to_json-Zeilen, ElasticSearch-Trefferlisten.
• Schema-Entdeckung. Wenn eine API keine Dokumentation hat, ist der Baum-Viewer die Dokumentation.
• Diff-Vorbereitung. Bevor Sie json-diff oder jq zwischen zwei Dateien ausführen, inspizieren Sie jede in einem Viewer, um offensichtliche Unterschiede manuell zu erkennen.
• Webhook-Payload-Inspektion. Stripe, GitHub, SendGrid und ähnliche Dienste senden alle JSON-Webhooks. Das Einfügen des Payloads in einen Viewer ist der schnellste Weg, um zu überprüfen, was Ihr Endpunkt erhalten wird.
• Beispieldaten erstellen. Bauen Sie eine Test-Fixture durch Eingeben von JSON und sehen Sie zu, wie der Baum sich inkrementell aktualisiert; fängt fehlende Klammern, bevor Sie die Datei speichern.

Häufige Fehler bei der Arbeit mit JSON

• Nachgestellte Kommas. {"a": 1,} ist legales JavaScript, aber illegales JSON. JSON.parse wirft SyntaxError: Unexpected token '}'. Entfernen Sie sie oder wechseln Sie zu JSON5.
• Kommentare. // so oder /* so */ sind in JavaScript und JSONC gültig, aber nicht in striktem JSON.
• Großzahl-Präzisionsverlust. Twitter- und Stripe-IDs können 2⁵³ überschreiten; JSON.parse("9007199254740993") gibt 9007199254740992 zurück. Erhalten Sie sie als Strings, wenn Präzision wichtig ist.
• Verwechslung von null mit fehlend. {"foo": null} hat foo als null definiert; {} hat foo undefiniert. Die Unterscheidung ist wichtig für API-Verträge und Datenbank-NULL-Behandlung.
• Doppelte Schlüssel. RFC 8259 sagt, dass das Verhalten undefiniert ist; in der Praxis behält jede JS-Engine den letzten Wert. {"a": 1, "a": 2} parst als {a: 2}.
• Zirkuläre Referenzen. JSON.stringify wirft TypeError: Converting circular structure to JSON. Reduzieren Sie Zyklen, oder verwenden Sie einen Replacer, oder eine Bibliothek wie flatted.
• Datums-Strings ohne Zeitzone. "2026-05-12" ist mehrdeutig; "2026-05-12T18:30:00Z" ist unzweideutiges ISO 8601 in UTC. Immer den Offset einschließen.

Weitere häufig gestellte Fragen

Wie groß darf eine JSON-Datei sein, die dieser Viewer verarbeiten kann?

Das Parsen von 1 MB mit JSON.parse dauert in V8 etwa 10 ms. Das Rendern von 100.000 zusammengeklappten DOM-Knoten kann den Browser für mehrere Sekunden einfrieren. In der Praxis ist dieser Viewer bis zu etwa 5 MB komfortabel; darüber hinaus erwarten Sie spürbare Verzögerung beim Rendern. Für größere Dokumente verwenden Sie einen Streaming-Parser wie stream-json in einem Web Worker, oder paginieren Sie die Eingabe in Chunks.

Warum kommt meine große Ganzzahl falsch zurück?

JavaScript-Zahlen sind IEEE 754 Doppelpräzisions-Gleitkommas. Ganzzahlen bis 2⁵³ − 1 = 9 007 199 254 740 991 überleben einen Round-Trip genau; darüber hinaus geht Präzision verloren. Twitter-Snowflake-IDs (64 Bit), Stripe-Kunden-IDs, Blockchain-Transaktions-IDs und viele Datenbank-Surrogatschlüssel überschreiten diese Grenze. JSON.parse wird stumm abschneiden. Der Fix ist entweder, IDs als Strings zu empfangen (die meisten modernen APIs tun das) oder mit einer Bibliothek zu parsen, die BigInt unterstützt.

Was ist JSON Pointer, und wo würde ich ihn verwenden?

RFC 6901 (April 2013) definiert eine Pfad-Syntax zur Adressierung von Knoten innerhalb eines JSON-Dokuments: /store/book/0/title wählt den Titel des ersten Buchs im Store-Array. JSON Pointer ist die Grundlage von JSON Patch (RFC 6902), das Dokument-Deltas als Arrays von Pointer-und-Operations-Paaren ausdrückt. Der Kubernetes API-Server verwendet JSON Patch für inkrementelle Updates; ebenso die REST-API von GitHub und viele andere Systeme.

Funktioniert NDJSON / JSON Lines in diesem Viewer?

Nein. NDJSON ist ein unabhängiger JSON-Wert pro Zeile, ohne umgebendes Array. JSON.parse auf die gesamte Datei wirft, weil die zweite Zeile dort beginnt, wo das erste Objekt endet. Wickeln Sie den gesamten Inhalt in [ und ] und ersetzen Sie jeden Zeilenumbruch zwischen Objekten durch ein Komma, oder fügen Sie jeweils eine Zeile ein, oder verwenden Sie einen dedizierten NDJSON-Viewer.

Wird mein JSON irgendwohin gesendet?

Nein. JSON.parse läuft in der JavaScript-Engine Ihres Browsers, der Baum wird lokal als DOM-Knoten gerendert, und keine Kopie Ihrer Daten wird über das Netzwerk gesendet. Dies ist sicher für API-Antworten mit Geheimnissen, Kundendaten oder PII. Öffnen Sie den Netzwerk-Tab in DevTools und fügen Sie ein Beispiel ein: Sie sehen null ausgehende Anfragen während des Parsens und Renderns.