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

Q: Was ist der Unterschied zwischen JSON.parse() und JSON.stringify()?

JSON.parse() wandelt einen JSON-String in einen JavaScript-Wert um. JSON.stringify() führt den umgekehrten Vorgang aus, indem es einen JavaScript-Wert in einen JSON-String umwandelt. Die Funktion akzeptiert außerdem ein Einrückungsargument für die übersichtliche Formatierung. Dieses Tool verwendet intern keine der beiden Funktionen. Dadurch können große Ganzzahlen exakt erhalten bleiben.

Was ist ein JSON-Formatter?

Ein JSON-Formatter ist ein Tool, das JSON-Text (JavaScript Object Notation) mit Einrückungen und Zeilenumbrüchen neu schreibt, ohne die Daten selbst zu verändern. JSON ist ein Klartextformat zum Speichern und Übertragen strukturierter Daten. Es besteht aus Name-Wert-Paaren und Listen. Programme sparen normalerweise Platz, indem sie alle überflüssigen Leerzeichen entfernen. Dadurch entsteht eine einzige, dichte Zeile, die für Menschen schwer lesbar ist. Ein Formatter, auch Beautifier oder Pretty-Printer genannt, fügt diese Leerzeichen auf einheitliche Weise wieder ein, sodass die Struktur sichtbar wird. Dieses Tool formatiert JSON automatisch während der Eingabe oder beim Einfügen. Es gibt keine Schaltfläche zum Formatieren; die Ausgabe wird bei jedem Tastendruck aktualisiert. Eine Zurücksetzen-Schaltfläche leert die Eingabe, und eine Kopieren-Schaltfläche kopiert das formatierte Ergebnis.

JSON-Syntaxregeln

JSON ist durch eine Spezifikation namens RFC 8259 definiert. Es gibt zwei Containertypen:

Objekte enthalten Name-Wert-Paare innerhalb geschweifter Klammern:

1{"name": "John", "age": 30, "city": "New York"}
2

Arrays enthalten geordnete Listen innerhalb eckiger Klammern:

1["apple", "banana", "cherry"]
2

Ein Wert in JSON muss einem von sechs Typen angehören: String, Zahl, boolescher Wert (true oder false), null, Objekt oder Array.

Einige Regeln verursachen die meisten Fehler:

Eigenschaftsnamen müssen in doppelte Anführungszeichen eingeschlossen sein. {name: "John"} ist ungültig; es muss {"name": "John"} lauten.
Strings müssen doppelte Anführungszeichen verwenden, keine einfachen.
Nach dem letzten Element eines Objekts oder Arrays darf kein Komma stehen (keine abschließenden Kommas).
JSON besitzt keine Kommentarsyntax, auch wenn die Verwendung von geschweiften und eckigen Klammern aus JavaScript stammt.
JSON kennt keinen Wert undefined. Für einen fehlenden Wert wird null verwendet.

Ein häufiger Fehler besteht darin, statt JSON ein JavaScript-Objektliteral einzufügen. {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-Formatter

Viele JSON-Formatter verarbeiten den Text mit JSON.parse(), um ein JavaScript-Objekt zu erstellen, und verwenden anschließend JSON.stringify(), um daraus mit Leerzeichen wieder Text zu machen. Dieser Hin-und-zurück-Schritt hat einen Nebeneffekt: JavaScript-Zahlen sind Gleitkommazahlen mit doppelter Genauigkeit nach IEEE 754. Sie können daher nicht jede Ganzzahl exakt darstellen, sobald diese größer als 2^53 − 1 (9.007.199.254.740.991) ist. Eine ID wie 9007199254740993 kann nach diesem Vorgang als 9007199254740992 ausgegeben werden.

Dieses Tool vermeidet diesen Schritt. Es liest die Eingabe Zeichen für Zeichen mit einem kleinen, eigens geschriebenen Parser. Statt jede Zahl oder jeden String in einen JavaScript-Wert umzuwandeln, kopiert es diesen Textabschnitt genau so, wie er geschrieben wurde, und platziert ihn anschließend auf der richtigen Einrückungsebene. Da Zahlen nie in eine Gleitkommazahl umgewandelt werden, behalten Ganzzahlen beliebiger Größe ihre exakten Ziffern. Wenn ein Objekt denselben Schlüssel zweimal enthält, bleiben beide Vorkommen an ihrer jeweiligen Stelle erhalten, anstatt auf das letzte Vorkommen reduziert zu werden, wie es beim Erstellen eines JavaScript-Objekts geschehen würde.

Der Ablauf im Einzelnen:

Das nächste Token lesen (ein Objekt, Array, String, eine Zahl, true, false oder null).
Das Token anhand der JSON-Grammatik prüfen. Es wird abgelehnt, wenn es gegen eine Regel verstößt, etwa durch einen Schlüssel ohne Anführungszeichen oder ein abschließendes Komma.
Den Text des Tokens unverändert in die Ausgabe kopieren.
Einen Zeilenumbruch einfügen und für jede Verschachtelungsebene innerhalb eines Objekts oder Arrays um 2 Leerzeichen einrücken. Ein leeres Objekt oder Array bleibt als {} oder [] in einer Zeile.
Wiederholen, bis die gesamte Eingabe gelesen wurde.

Die Einrückung ist fest auf 2 Leerzeichen eingestellt; es gibt keine Option, dies zu ändern. Solange das Eingabefeld leer ist, zeigt das Ausgabefeld den Platzhaltertext „Das formatierte JSON wird hier automatisch angezeigt …“. Wenn die Eingabe gegen eine JSON-Regel verstößt, zeigt das Tool die Meldung „Ungültiges JSON: Bitte überprüfen Sie Ihre Eingabe“ statt einer technischen Parsermeldung mit der genauen Zeichenposition. Das integrierte JSON.parse() der Browser gibt in seinem Fehlertext dagegen eine Zeichenposition an.

Beispiel zur Formatierung

Diese minimierte Eingabe:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

wird zu:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Jedes verschachtelte Objekt oder Array wird eine Ebene weiter eingerückt als sein übergeordnetes Element. Dadurch ist das Verhältnis zwischen address und seinen drei Feldern sofort erkennbar.

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

1{"id":9007199254740993}
2

wird formatiert zu:

1{
2  "id": 9007199254740993
3}
4

Die Ziffern bleiben genau so erhalten, wie sie eingegeben wurden. Ein Formatter, der auf JSON.parse() und anschließend JSON.stringify() basiert, würde diese Zahl dagegen unbemerkt in 9007199254740992 umwandeln.

Häufige JSON-Fehler

Eigenschaftsname ohne Anführungszeichen: {name: "John"}. Lösung: {"name": "John"}.
Abschließendes Komma: {"age": 30,}. Lösung: Das Komma vor der schließenden geschweiften Klammer entfernen.
Nicht zusammenpassende Klammern: {"data": [1, 2}. Lösung: Das Array mit ] schließen, bevor das Objekt geschlossen wird.
Nicht geschlossener String: {"name": "John}. Lösung: Das fehlende schließende Anführungszeichen ergänzen.
Einfache Anführungszeichen: {'name': 'John'}. Lösung: Doppelte Anführungszeichen verwenden.
undefined, NaN oder Infinity: Keiner dieser Werte ist in JSON gültig. null oder einen String verwenden.

Eine häufige Ursache für diese Fehler ist das direkte Kopieren eines Objekts aus der Browserkonsole oder einem Serverprotokoll. Solche Inhalte enthalten oft nur für JavaScript gültige Syntax, die vor der Verwendung als gültiges JSON bereinigt werden muss.

Wann ein JSON-Formatter verwendet wird

JSON-Formatter werden am häufigsten zum Untersuchen von API-Antworten verwendet, die zur Einsparung von Bandbreite normalerweise minimiert übertragen werden. Sie dienen außerdem dazu, Konfigurationsdateien wie package.json oder composer.json manuell zu prüfen, Daten aus dem lokalen Speicher oder der Konsole eines Browsers zu lesen und die Struktur eines von einem anderen System empfangenen Datensatzes zu verstehen.

Weitere Möglichkeiten zum Formatieren von JSON

Entwicklertools des Browsers: Chrome, Edge und Firefox formatieren JSON-Antworten automatisch in der Vorschau des Netzwerk-Tabs.
Code-Editoren: Visual Studio Code formatiert eine geöffnete JSON-Datei mit Alt+Shift+F (auf einem Mac mit Shift+Option+F). Die meisten Editoren bieten eine entsprechende Tastenkombination oder eine Erweiterung zur Formatierung.
Kommandozeile: jq (jq . file.json) und Pythons integriertes python -m json.tool file.json formatieren JSON in einem Terminal.

JSON-Formatierung in Code integrieren

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

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

In Python:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Beide Ansätze analysieren den Text als native Datenstruktur und serialisieren ihn anschließend mit Leerzeichen erneut. Das ist einfach zu schreiben, kann aber die Zahlen verändern. JavaScript speichert jede Zahl als Double, sodass 9007199254740993 als 9007199254740992 zurückkommt. Python behält Ganzzahlen exakt bei, da Python-Ganzzahlen keine Größenbeschränkung haben. Trotzdem schreibt Python 1.0e2 als 100.0 neu und wandelt 1e999 in Infinity um, was kein gültiges JSON ist. Anwendungen, die exakte große Ganzzahlen benötigen, etwa Datenbank-IDs, speichern diese in JSON häufig als Strings statt als Zahlen.

Kurze Geschichte von JSON

Douglas Crockford definierte JSON Anfang der 2000er-Jahre. Dabei übernahm er die Syntax aus JavaScript-Objektliteralen, machte sie aber aus jeder Programmiersprache nutzbar. RFC 4627 standardisierte JSON im Jahr 2006. Das Format verbreitete sich schnell, weil es kürzer zu schreiben war als XML und direkt auf JavaScript-Objekte abgebildet werden konnte. Das war besonders relevant, als Webanwendungen begannen, Daten im Hintergrund abzurufen, statt ganze Seiten neu zu laden. In den 2010er-Jahren wurde JSON zum Standardformat für REST-APIs und Datenbanken wie MongoDB.

Häufig gestellte Fragen

Was ist ein JSON-Formatter?
Ein Tool, das JSON-Text um Einrückungen, Zeilenumbrüche und Leerzeichen ergänzt, damit seine Struktur leicht lesbar ist, ohne die Daten zu verändern.

Verändert die Formatierung die Daten?
Nein. Die Formatierung verändert nur Leerzeichen. Dieses Tool kopiert jeden String und jede Zahl genau so, wie sie eingegeben wurden. Daher stimmen die Werte in der formatierten Ausgabe exakt mit der Eingabe überein, auch bei Zahlen, die sich nicht exakt als JavaScript-Zahl speichern lassen.

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 abschließendes Komma, einfache Anführungszeichen, ein nicht geschlossener String oder eine nicht passende Klammer. Dieses Tool zeigt nicht die genaue Zeichenposition des Problems an. Ein Abgleich der Eingabe mit den oben aufgeführten Regeln findet den Fehler normalerweise schnell.

Kann JSON Kommentare enthalten?
Nein. Die Spezifikation erlaubt keine Kommentare. Formate wie JSONC und JSON5 ergänzen die JSON-Syntax um Kommentare, wenn dies beispielsweise bei Konfigurationsdateien hilfreich ist.

Was ist die übliche JSON-Einrückung?
Zwei Leerzeichen sind in der Webentwicklung die häufigste Konvention und werden auch von diesem Tool verwendet. Manche Styleguides 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 einen JSON-String in einen JavaScript-Wert um. JSON.stringify() führt den umgekehrten Vorgang aus, indem es einen JavaScript-Wert in einen JSON-String umwandelt. Die Funktion akzeptiert außerdem ein Einrückungsargument für die übersichtliche Formatierung. Dieses Tool verwendet intern keine der beiden Funktionen. Dadurch können große Ganzzahlen exakt erhalten bleiben.

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