JSON-Formatierer: JSON Online Kostenlos Verschönern & Validieren

Was ist ein JSON-Formatierer?

Ein JSON-Formatierer ist ein Werkzeug, das JSON-Text (JavaScript Object Notation) einliest und mit Einrückungen und Zeilenumbrüchen neu schreibt, ohne die Daten selbst zu verändern. JSON ist ein Nur-Text-Format zum Speichern und Senden strukturierter Daten und besteht aus Name-Wert-Paaren und Listen. Programme sparen meist Platz, indem sie jeden überflüssigen Leerraum entfernen. Das ergibt eine einzige dichte Zeile, die für Menschen schwer lesbar ist. Ein Formatierer, auch Beautifier oder Pretty Printer genannt, fügt diesen Leerraum einheitlich wieder ein, damit die Struktur sichtbar wird. Dieses Werkzeug formatiert JSON automatisch beim Tippen oder Einfügen, ganz ohne Schaltflächen.

Syntaxregeln von JSON

JSON wird durch eine Spezifikation namens RFC 8259 definiert. Es kennt zwei Containertypen:

Objekte enthalten Name-Wert-Paare in geschweiften Klammern:

Arrays enthalten geordnete Listen in eckigen Klammern:

Ein Wert in JSON muss einer von sechs Typen sein: eine Zeichenkette, eine Zahl, ein boolescher Wert (true oder false), null, ein Objekt oder ein Array.

Einige wenige Regeln verursachen die meisten Fehler:

• Eigenschaftsnamen müssen in doppelte Anführungszeichen gesetzt werden. {name: "John"} ist ungültig; richtig ist {"name": "John"}.
• Zeichenketten müssen doppelte, keine einfachen Anführungszeichen verwenden.
• Auf das letzte Element eines Objekts oder Arrays darf kein Komma folgen (keine nachgestellten Kommas).
• JSON kennt keine Kommentarsyntax, obwohl sein Aussehen mit Klammern von JavaScript stammt.
• JSON kennt kein undefined. Verwenden Sie null für einen fehlenden Wert.

Ein häufiger Fehler ist das Einfügen eines JavaScript-Objektliterals statt JSON. {name: 'John', age: undefined} ist gültiges JavaScript, aber kein gültiges JSON. Die JSON-Version lautet {"name": "John", "age": null}.

So funktioniert dieser JSON-Formatierer

Viele JSON-Formatierer lassen den Text durch JSON.parse() laufen, um ein JavaScript-Objekt aufzubauen, und anschließend durch JSON.stringify(), um ihn mit Abständen wieder in Text umzuwandeln. Dieser Hin-und-zurück-Weg hat eine Nebenwirkung: JavaScript-Zahlen sind IEEE-754-Gleitkommazahlen doppelter Genauigkeit, die nicht jede ganze Zahl exakt darstellen können, sobald sie 2^53 − 1 (9,007,199,254,740,991) überschreiten. Eine ID wie 9007199254740993 kann nach diesem Hin-und-zurück-Weg als 9007199254740992 herauskommen.

Dieses Werkzeug vermeidet diesen Schritt. Es liest die Eingabe Zeichen für Zeichen mit einem kleinen selbst geschriebenen Parser und wandelt weder Zahlen noch Zeichenketten in JavaScript-Werte um. Stattdessen kopiert es jedes Textstück genau so, wie es geschrieben ist, und setzt es auf die richtige Einrückungsebene. Da Zahlen nie in Gleitkommazahlen umgewandelt werden, behalten ganze Zahlen beliebiger Größe ihre exakten Ziffern. Ist ein Schlüssel in einem Objekt zweimal geschrieben, bleiben beide Kopien an ihrer Stelle erhalten und werden nicht auf die letzte reduziert, wie es beim Aufbau eines JavaScript-Objekts geschähe.

Der Ablauf, Schritt für Schritt:

1. Lesen Sie das nächste Token (ein Objekt, Array, eine Zeichenkette, Zahl, true, false oder null).
2. Prüfen Sie es anhand der JSON-Grammatik. Weisen Sie es zurück, wenn es eine Regel verletzt, etwa durch einen Schlüssel ohne Anführungszeichen oder ein nachgestelltes Komma.
3. Kopieren Sie den Text des Tokens unverändert in die Ausgabe.
4. Fügen Sie einen Zeilenumbruch hinzu und rücken Sie für jede Verschachtelungsebene innerhalb eines Objekts oder Arrays um 2 Leerzeichen ein.
5. Wiederholen Sie dies, bis die gesamte Eingabe gelesen wurde.

Die Einrückung ist fest auf 2 Leerzeichen eingestellt; sie lässt sich nicht ändern. Ist die Eingabe leer, wird nichts angezeigt. Verstößt die Eingabe gegen eine JSON-Regel, zeigt das Werkzeug die Meldung „Ungültiges JSON: Bitte überprüfen Sie Ihre Eingabe“ an statt einer technischen Parser-Meldung mit der genauen Zeichenposition. Das in Browsern eingebaute JSON.parse() nennt dagegen in seinem Fehlertext eine Zeichenposition.

Durchgerechnetes Beispiel

Diese minimierte Eingabe:

wird zu:

Jedes verschachtelte Objekt oder Array wird um eine Ebene weiter eingerückt als das übergeordnete, sodass die Beziehung zwischen address und seinen drei Feldern auf einen Blick erkennbar ist.

Ein zweites Beispiel zeigt, warum das Kopieren von Literalen wichtig ist. Diese Eingabe:

wird formatiert zu:

Die Ziffern bleiben genau so, wie sie getippt wurden. Ein Formatierer auf Basis von JSON.parse() mit anschließendem JSON.stringify() würde diese Zahl stattdessen stillschweigend in 9007199254740992 verwandeln.

Häufige JSON-Fehler

• Eigenschaftsname ohne Anführungszeichen: {name: "John"}. Korrektur: {"name": "John"}.
• Nachgestelltes Komma: {"age": 30,}. Korrektur: das Komma vor der schließenden Klammer entfernen.
• Nicht zusammenpassende Klammern: {"data": [1, 2}. Korrektur: das Array mit ] schließen, bevor das Objekt geschlossen wird.
• Nicht geschlossene Zeichenkette: {"name": "John}. Korrektur: das fehlende schließende Anführungszeichen ergänzen.
• Einfache Anführungszeichen: {'name': 'John'}. Korrektur: doppelte Anführungszeichen verwenden.
• undefined, NaN oder Infinity: Keiner davon ist ein gültiger JSON-Wert. Verwenden Sie null oder eine Zeichenkette.

Eine häufige Quelle dieser Fehler ist das Kopieren eines Objekts direkt aus einer Browserkonsole oder einem Serverprotokoll. Es enthält oft Syntax, die nur in JavaScript gilt und bereinigt werden muss, bevor sie gültiges JSON ergibt.

Wann ein JSON-Formatierer nützlich ist

JSON-Formatierer werden am häufigsten verwendet, um API-Antworten zu untersuchen, die meist minimiert gesendet werden, um Bandbreite zu sparen. Sie dienen außerdem dazu, Konfigurationsdateien wie package.json oder tsconfig.json von Hand zu prüfen, Daten aus dem lokalen Speicher oder der Konsole eines Browsers zu lesen und den Aufbau eines von einem anderen System erhaltenen Datensatzes zu verstehen.

Weitere Möglichkeiten, JSON zu formatieren

• Entwicklertools des Browsers: Chrome, Edge und Firefox formatieren JSON-Antworten im Vorschaubereich des Netzwerk-Tabs automatisch.
• Code-Editoren: Visual Studio Code formatiert eine geöffnete JSON-Datei mit Umschalt+Alt+F unter Windows, Umschalt+Option+F auf dem Mac oder Strg+Umschalt+I unter Linux. Die meisten Editoren haben eine entsprechende Tastenkombination oder eine Formatierungserweiterung.
• Befehlszeile: jq (jq . file.json) und das in Python eingebaute python -m json.tool file.json formatieren beide JSON im Terminal.

JSON-Formatierung in Code einbauen

Die meisten Programmiersprachen enthalten eine JSON-Bibliothek mit einer Option für die Einrückung. In JavaScript:

In Python:

Beide Ansätze lesen den Text in eine native Datenstruktur ein und serialisieren sie dann mit Abständen neu. Wie oben gezeigt, ist das einfach zu schreiben, kann aber große ganze Zahlen verändern, weil beide Sprachen Zahlen standardmäßig als Gleitkommazahlen doppelter Genauigkeit speichern. Anwendungen, die exakte große ganze Zahlen brauchen, etwa Datenbank-IDs, speichern sie in JSON üblicherweise als Zeichenketten statt als Zahlen.

Eine kurze Geschichte von JSON

Douglas Crockford legte JSON in den frühen 2000er-Jahren fest. Er übernahm die Syntax aus JavaScript-Objektliteralen, machte es aber aus jeder Sprache nutzbar. RFC 4627 machte es 2006 zum formalen Standard. Es verbreitete sich schnell, weil es kürzer zu schreiben war als XML und sich direkt auf JavaScript-Objekte abbilden ließ. Das wurde wichtig, als Webanwendungen begannen, Daten im Hintergrund abzurufen, statt ganze Seiten neu zu laden. In den 2010er-Jahren war es in Web-APIs weit verbreitet.

Häufig gestellte Fragen

Was ist ein JSON-Formatierer? Ein Werkzeug, das JSON-Text Einrückungen, Zeilenumbrüche und Abstände hinzufügt, damit seine Struktur leicht lesbar ist, ohne die Daten zu verändern.

Verändert die Formatierung die Daten? Nein. Die Formatierung ändert nur den Leerraum. Dieses Werkzeug kopiert jede Zeichenkette und jede Zahl genau so, wie sie getippt wurde, sodass die Werte in der formatierten Ausgabe exakt mit der Eingabe übereinstimmen, auch Zahlen, die zu groß sind, um als JavaScript-Zahl exakt gespeichert zu werden.

Warum erhalte ich den Fehler „Ungültiges JSON“? Die Eingabe verstößt gegen eine JSON-Regel. Häufige Ursachen sind Eigenschaftsnamen ohne Anführungszeichen, ein nachgestelltes Komma, einfache Anführungszeichen, eine nicht geschlossene Zeichenkette oder eine nicht passende Klammer. Dieses Werkzeug zeigt nicht die genaue Zeichenposition des Problems an; ein Abgleich der Eingabe mit den oben aufgeführten Regeln führt meist schnell zum Ziel.

Kann JSON Kommentare enthalten? Nein. Die Spezifikation erlaubt sie nicht. Formate wie JSONC und JSON5 ergänzen die JSON-Syntax um Kommentare, für Fälle, in denen das nützlich ist, etwa bei Konfigurationsdateien.

Welche Einrückung ist bei JSON üblich? Zwei Leerzeichen sind eine verbreitete Konvention und werden von diesem Werkzeug verwendet. Manche Stilrichtlinien nutzen stattdessen vier Leerzeichen oder Tabulatoren; die JSON-Spezifikation selbst schreibt keine bestimmte Einrückung vor.

Was ist der Unterschied zwischen JSON.parse() und JSON.stringify()? JSON.parse() wandelt eine JSON-Zeichenkette in einen JavaScript-Wert um. JSON.stringify() macht das Gegenteil, wandelt also einen JavaScript-Wert in eine JSON-Zeichenkette um, und akzeptiert ein Argument für die Einrückung bei der übersichtlichen Ausgabe. Dieses Werkzeug verwendet intern keine der beiden Funktionen, wodurch es große ganze Zahlen exakt erhalten kann.

Referenzen

1. Internet Engineering Task Force. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. RFC 8259 – Ein JSON-Wert ist ein Objekt, Array, eine Zahl, Zeichenkette, true, false oder null; zwischen Tokens ist nur Leerraum erlaubt.
2. Mozilla Developer Network. JSON.parse(). JSON.parse()-Referenz – Arrays und Objekte dürfen keine nachgestellten Kommas enthalten; die Fehlermeldung nennt eine Position.
3. Mozilla Developer Network. Number.MAX_SAFE_INTEGER. Number.MAX_SAFE_INTEGER-Referenz – Die größte sichere ganze Zahl ist 2^53 − 1 = 9,007,199,254,740,991.
4. Internet Engineering Task Force. RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON). RFC 4627 – das erste JSON-RFC, von D. Crockford, Juli 2006.
5. Microsoft. Editing JSON with Visual Studio Code. VS-Code-JSON-Dokumentation – die Tastenkombination für „Dokument formatieren“ auf jeder Plattform.
6. Python Software Foundation. json — JSON encoder and decoder. Python-json-Dokumentation – python -m json.tool gibt JSON in der Befehlszeile übersichtlich formatiert aus.