JSON Formatter und Validator: lokal im Browser, mit Typ-Legende
JSON Formatter, Validator und Sortierer. Mit Typ-Chips für jedes Feld, Baumansicht, Caret-Fehlerkarte und Liste der häufigen Ursachen. Deine Eingaben bleiben im Browser.
JSON sieht überall gleich aus - bis es bricht. Der Formatter unten parst, formatiert, minifiziert, sortiert oder escaped. Wenn etwas nicht passt, zeigt er dir die Stelle mit Caret und sagt dir, was an der Position steht und was er erwartet hat. Alles läuft im Browser; deine Eingaben bleiben lokal - relevant, wenn du Kundendaten oder API-Antworten ins Tool einfügst.
{ "id": 42, "title": "Sample Document", "status": "published", "active": true, "tags": [ "draft", "review" ], "metadata": { "created": "2024-01-15", "owner": null } }
Das Ergebnis erklärt
▾ Objekt {6}
▾ "tags": Array [2]
▾ "metadata": Objekt {2}
Was ist JSON, und warum ist es so strikt?
JSON entstand 2001 als Untermenge von JavaScript-Objekt-Literalen. Daraus wurde RFC 8259 (2017), der bis heute gültige Standard. Die Striktheit ist Absicht: genau sechs Typen, eindeutige Tokenisierung, keine Kommentare. Jeder Parser kommt am Ende beim selben Ergebnis raus.
Die sechs Typen sind String (doppelte Anführungszeichen), Zahl (dezimal, kein "Not-a-Number", kein "Infinity"), Boolean (true / false), Null (null, kein undefined), Array (kommagetrennt, Reihenfolge zählt) und Objekt (Schlüssel sind Strings). Die Typenkarten- und Chips oben zeigen jeden Typ mit Farbe, Beispiel und Regel; die Baumansicht färbt jedes Feld in derselben Farbe. Klick auf einen Chip hebt den Typ im Baum hervor - praktisch beim Suchen "wo sind eigentlich alle Strings".
Wie finde ich den Fehler in meiner JSON-Datei?
Die häufigste Herausforderung beim Arbeiten mit JSON ist nicht "wie formatiere ich das", sondern "warum ist es kaputt". Die Browser-Funktion JSON.parse liefert bei Fehlern deine Fehlerposition, mit der wir die genaue Stelle markieren können. Die rote Fehlerkarte oben zeigt dann:
- Position - Zeile, Spalte, Zeichen-Index.
- Kontextfenster - die Fehlerzeile, sowie zusätzlich die Zeilen darüber und darunter, mit einer Markierung unter der Fehlerstelle.
- Erwartet vs. gefunden - was der Parser an der Position erwartet hat und was er stattdessen vorfand.
- Häufige Ursachen eine Liste möglicher Ursachen: zusätzliches Komma (Trailing-Komma), einfaches Anführungszeichen, fehlendes Anführungszeichen, Kommentar-Syntax,
undefinedoderNaN.
Safari liefert nicht immer eine Position; in dem Fall fällt das Kontextfenster weg, die Fehlermeldung und die Ursachen-Liste bleiben sichtbar.
Trailing-Kommas, Eizelne Anführungszeichen und andere JavaScript-Vermächtnisse
Wer JSON aus JS-Code zieht, läuft regelmäßig in dieselben Fallen:
| Problem | JS akzeptiert | JSON akzeptiert | Fix |
|---|---|---|---|
{"a": 1,} (Trailing-Komma) | Ja (seit ES5) | Nein (RFC 8259 §4) | Komma entfernen |
{'a': 1} (Single Quotes) | Ja | Nein | Doppelte Quotes |
{a: 1} (Unquoted Key) | Ja | Nein | Key in Quotes |
// kommentar | Ja | Nein | Kommentare raus |
undefined, NaN, Infinity | Ja | Nein | null / Zahl-String |
Auf diese Punkte hat JSON5 reagiert: Trailing-Kommas, Single Quotes, unquoted Keys, Kommentare, NaN und Infinity sind erlaubt - undefined allerdings nicht. JSON5 ist trotzdem nicht dasselbe Format wie JSON. Wenn dein Tool oder API striktes JSON erwartet (das tun fast alle), musst du die Eigenheiten vorher entfernen. Die Fehlerkarte zeigt dir die erste verdächtige Stelle.
Formatieren, Minifizieren, Sortieren - was wann?
Formatieren mit 2 oder 4 Leerzeichen ist der Default für Lesen und Code-Review. 2 Leerzeichen ist Prettiers Default und in Style Guides wie Airbnb oder Google der Standard.
Minifizieren entfernt jedes Whitespace-Zeichen. Praktisch, wenn JSON in eine Env-Variable, einen URL-Query-String oder einen DynamoDB-Eintrag muss - dort zählt jedes Byte.
Schlüssel sortieren ordnet Object-Keys alphabetisch (rekursiv per Default). Hauptzweck: zwei ähnliche Configs vergleichbar machen, ohne dass git diff lärmt. Arrays bleiben in Reihenfolge, weil Position bei Arrays semantisch zählt.
Escape und Unescape - JSON in JSON, Text in JSON
Escapen wandelt beliebigen Text in eine JSON-Zeichenkette. Aus hallo "welt" wird "hallo \"welt\"". Das ist JSON.stringify(input) unter der Haube - brauchst du beim Einbetten von Text in eine Konfiguration, beim umschreiben eines JSON-Werts in einer anderen Zeitchenkette, oder beim Übergeben von freiem Text als JSON-Wert in einer API.
Unescapen ist die Umkehrung: ein JSON-String wird zurück in Klartext umgewandelt. Funktioniert auf einem einzelnen String-Literal, nicht aber auf einem ganzen Objekt.
Häufige Fragen
Was ist ungültiges JSON und woran erkenne ich es?
JSON ist eine strikte Untermenge von JavaScript. Trailing-Kommas, einfache Anführungszeichen, Schlüssel ohne Quotes, Kommentare, undefined und NaN sind verboten. Der Formatter oben meldet die erste Fehlerstelle mit Caret und Ursachen-Liste.
Wie finde ich den Fehler in einer JSON-Datei?
Bei einem Parse-Fehler erscheint die rote Fehlerkarte mit Zeile, Spalte und Zeichen-Position. Chrome und Firefox liefern die genaue Position; Safari nicht immer.
Was bedeuten Trailing-Kommas und warum mag JSON sie nicht?
Ein Komma direkt vor } oder ]. JavaScript erlaubt das, JSON nicht - RFC 8259 verbietet es, damit Maschinen-Parser eindeutig tokenisieren können.
JSON minifizieren oder formatieren - wann nutze ich was?
Formatieren beim Lesen und Debuggen, Minifizieren beim Übertragen oder Speichern in Env-Variablen. Ein Klick wechselt.
Wie sortiere ich Schlüssel in JSON?
Modus auf Schlüssel sortieren stellen - rekursiv per Default. Arrays bleiben in Reihenfolge.
Was ist der Unterschied zwischen JSON und JSON5?
JSON5 erlaubt Trailing-Kommas, Single Quotes, unquoted Keys und Kommentare. Der Formatter spricht v1 nur striktes JSON nach RFC 8259.
Was bedeutet einen JSON-String escapen?
Einen beliebigen Text in ein JSON-String-Literal verwandeln - Anführungszeichen zu \\\", Zeilenumbrüche zu \\n. Unescapen ist die Umkehrung.