Deutsch
JSON formatieren, prüfen und mit Live-Baumansicht erkunden.
Zuletzt aktualisiert
Ein JSON-Formatter (auch JSON-Beautifier oder Pretty-Printer genannt) verwandelt kompaktes oder chaotisches JSON in lesbar eingerückte Daten. Er gehört zu den Tools, die man als Entwickler täglich braucht – beim Anschauen von API-Antworten, beim Lesen von Config-Dateien, beim Debuggen von Logs, beim Vergleichen von Test-Fixtures und beim Hin- und Herschieben von Daten zwischen Frontend und Backend.
JSON ist ein strenges Format: Schlüssel müssen in doppelten Anführungszeichen stehen, Strings ebenfalls, Kommas dürfen nur an den richtigen Stellen sitzen, und jede öffnende { oder [ muss auch wieder geschlossen werden. Ein Formatter macht diese Struktur sichtbar, und der eingebaute Validator zeigt dir präzise, wo die Syntax bricht – falls sie das tut.
JSON steht für JavaScript Object Notation. Auch wenn das Format ursprünglich aus JavaScript kommt, kann praktisch jede Programmiersprache JSON lesen und schreiben. Genau deshalb hat es sich als Standardformat für den Datenaustausch im Web durchgesetzt.
{} für benannte Felder, Arrays [] für geordnete Listen – beide lassen sich beliebig tief ineinander verschachteln.null, Objekt und Array. Kein undefined, keine Funktionen, keine Kommentare.Kopiere das JSON aus deiner API-Antwort, deinem Logfile oder deiner Config und füge es links ein. Der Formatter akzeptiert sowohl minifizierten als auch teilweise formatierten Input.
Zwei Leerzeichen sind der gängigste Stil, vier sind ebenfalls weit verbreitet. Nimm einfach das, was zum Stil deines Projekts passt.
Ist das JSON gültig, erscheint die formatierte Ausgabe rechts. Falls nicht, nennt dir die Fehlermeldung Zeile und Position, an der das Parsen fehlgeschlagen ist.
Über die einklappbare Baumansicht lassen sich tief verschachtelte Objekte und Arrays zusammenfalten. Das ist der schnellste Weg, die Struktur einer fremden API-Antwort zu erfassen.
Übernimm die formatierte Version in deinen Code oder in die Doku – oder minifiziere sie wieder zu einer Zeile, etwa für Speicher oder Netzwerktransfer.
Die komplette Liste der JSON-Bausteine. Alles, was hier nicht steht, ist kein gültiges JSON. Spezifikation: RFC 8259 und ECMA-404.
| Token | Bedeutung | Beispiel |
|---|---|---|
{ } | Objekt – Sammlung aus Schlüssel/Wert-Paaren | {"name": "Maya"} |
[ ] | Array – geordnete Liste von Werten | [1, 2, 3] |
"..." | String – immer in doppelten Anführungszeichen | "hello" |
| Zahl | Ganzzahl oder Gleitkommazahl, ohne Anführungszeichen, kein führendes + | 42, -3.14 |
true / false | Boolean-Werte, klein geschrieben | true |
null | Leerer bzw. fehlender Wert | null |
: | Trennzeichen zwischen Schlüssel und Wert | "id": 7 |
, | Trennzeichen zwischen Elementen – nie am Ende | [1, 2, 3] |
{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}{ "user": { "id": 7, "name": "Maya" }, "skills": ["HTML", "JavaScript"]}Nach der Formatierung lassen sich das verschachtelte user-Objekt und das skills-Array auf einen Blick erfassen. Die Daten bleiben dabei identisch – nur der Whitespace ändert sich.
{ "name": "Coddy", "active": true,}JSON erlaubt kein Komma nach der letzten Property. Der Validator markiert die schließende }. Das ist einer der häufigsten Fehler, wenn man JavaScript-Objekt-Syntax als JSON übernimmt.
{ "count": 3, "countText": "3", "enabled": true}3 ist eine Zahl, "3" ist ein String, und true ist ein Boolean – drei verschiedene JSON-Typen. APIs gehen oft kaputt, wenn die Struktur zwar passt, aber der Typ eines Werts daneben liegt.
{ "data": { "orders": [ { "id": 101, "items": [{ "sku": "A", "qty": 2 }] }, { "id": 102, "items": [] } ] }}Mit der Baumansicht kannst du data.orders einklappen und die Struktur Ebene für Ebene öffnen. Verschachtelte Arrays aus Objekten sind das mit Abstand häufigste Muster in REST-Antworten.
undefined sind in JSON nicht erlaubt, und nachgestellte Kommas brechen den Parser.+, keine führenden Nullen (außer 0 selbst) haben dürfen und nicht in Anführungszeichen stehen, wenn man wirklich einen Zahlentyp will.null-Werte bleiben exakt gleich. Wenn du anschließend wieder minifizierst, bekommst du die ursprüngliche, netzwerkfreundliche Form zurück.undefined gibt es in JSON nicht.package.json, tsconfig.json), Paket-Metadaten, Logzeilen, Browser-LocalStorage und Test-Fixtures.