JSON online formatieren — Der vollständige Leitfaden

Was ist JSON?

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenaustauschformat, das für Menschen leicht zu lesen und zu schreiben und für Maschinen leicht zu parsen und zu generieren ist. Es ist das dominierende Format für API-Antworten, Konfigurationsdateien und Datenspeicherung in der modernen Webentwicklung.

Wenn Sie mit APIs arbeiten, begegnen Sie JSON ständig. Nahezu jede REST-API-Antwort, jeder Webhook-Payload und jede Konfigurationsdatei in einem Node.js-Projekt ist JSON. JSON lesen, formatieren und debuggen zu können ist eine grundlegende Entwicklerfähigkeit.

Warum JSON formatieren?

Minifiziertes JSON ist schwer zu lesen. API-Antworten kommen oft als einzelne Zeile ohne Whitespace an — ein Albtraum zum Debuggen. Das Formatieren (oder "Pretty-Printing") von JSON fügt ordnungsgemäße Einrückung und Zeilenumbrüche hinzu, sodass Sie die Struktur sofort verstehen können.

Vor dem Formatieren:

{"name":"John Doe","age":30,"city":"New York","hobbies":["reading","coding"],"address":{"street":"123 Main St","zip":"10001"}}

Nach dem Formatieren:

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "coding"
  ],
  "address": {
    "street": "123 Main St",
    "zip": "10001"
  }
}

Der Unterschied ist dramatisch. In der formatierten Version sehen Sie auf einen Blick, dass es fünf Schlüssel auf der obersten Ebene gibt, dass hobbies ein Array mit zwei Elementen ist und dass address ein verschachteltes Objekt ist. In der minifizierten Version müssen Sie die passenden geschweiften Klammern und eckigen Klammern visuell analysieren.

Wie man einen JSON-Formatter verwendet

1. JSON einfügen — JSON-Daten in das Eingabefeld einfügen
2. "Formatieren" klicken — mit 2- oder 4-Leerzeichen-Einrückung bereinigen
3. "Minifizieren" klicken — JSON zurück in eine einzelne Zeile komprimieren
4. Ergebnis kopieren — mit einem Klick in die Zwischenablage

Der Formatter validiert Ihr JSON beim Einfügen, sodass Sie sofortiges Feedback erhalten, wenn etwas nicht stimmt.

Häufige JSON-Fehler (und wie man sie behebt)

JSON hat strenge Syntaxregeln, und das Verletzen auch nur einer davon führt zu einem Parse-Fehler. Hier sind die häufigsten, nach Häufigkeit geordnet:

1. Abschließende Kommas

Der häufigste JSON-Fehler. JavaScript erlaubt abschließende Kommas in Arrays und Objekten, daher vergessen Entwickler oft, dass JSON das nicht tut.

// Falsch — abschließendes Komma nach "coding"
{
  "hobbies": ["reading", "coding",]
}

// Richtig
{
  "hobbies": ["reading", "coding"]
}

2. Einfache Anführungszeichen statt doppelter Anführungszeichen

JSON erfordert doppelte Anführungszeichen für alle Zeichenketten. Einfache Anführungszeichen sind in JavaScript und Python gültig, brechen aber das JSON-Parsing.

// Falsch
{'name': 'John Doe'}

// Richtig
{"name": "John Doe"}

3. Schlüssel ohne Anführungszeichen

JavaScript-Objekte brauchen keine in Anführungszeichen gesetzten Schlüssel (bei einfachen Bezeichnern), aber in JSON muss jeder Schlüssel eine in doppelten Anführungszeichen gesetzte Zeichenkette sein.

// Falsch
{name: "John Doe", age: 30}

// Richtig
{"name": "John Doe", "age": 30}

4. Kommentare in JSON

JSON unterstützt keine Kommentare. Das überrascht manchen, weil JSON wie JavaScript aussieht, und JavaScript Kommentare unterstützt. Wenn Sie Kommentare in einer Konfigurationsdatei benötigen, verwenden Sie JSONC (JSON with Comments, in VS Code unterstützt) oder YAML.

// Falsch
{
  "port": 3000,  // Server-Port
  "host": "localhost"
}

// Richtig
{
  "port": 3000,
  "host": "localhost"
}

5. Nicht-escapte Sonderzeichen

Zeichenketten, die Backslashes, doppelte Anführungszeichen oder Steuerzeichen enthalten, müssen ordnungsgemäß escapt werden:

// Falsch — nicht-escaptes Backslash und Anführungszeichen
{"path": "C:\Users\john", "note": "He said \"hello\""}

// Richtig
{"path": "C:\\Users\\john", "note": "He said \"hello\""}

6. Ungültige Werttypen

JSON unterstützt genau diese Werttypen: Zeichenketten, Zahlen, Booleans (true/false), null, Objekte und Arrays. Nichts anderes ist gültig:

// Falsch
{"value": undefined}
{"count": NaN}
{"total": Infinity}
{"date": new Date()}

// Richtige Alternativen
{"value": null}
{"count": 0}
{"total": 9999999}
{"date": "2026-03-15T10:30:00Z"}

JSON über die Kommandozeile formatieren

Wenn Sie keinen Zugriff auf ein webbasiertes Tool haben oder JSON als Teil eines Skripts formatieren müssen, sind diese Kommandozeilenansätze praktisch:

Mit Python (auf den meisten Systemen verfügbar)

# Eine JSON-Datei formatieren
python3 -m json.tool input.json

# Per Pipe übergebenes JSON formatieren
curl -s https://api.example.com/data | python3 -m json.tool

# Mit benutzerdefinierter Einrückung formatieren
python3 -c "import json,sys; print(json.dumps(json.load(sys.stdin), indent=4))" < input.json

Mit jq (das Schweizer Taschenmesser für JSON)

jq ist ein spezieller JSON-Prozessor und das mächtigste Tool für die Arbeit mit JSON auf der Kommandozeile:

# Pretty-Print
cat data.json | jq '.'

# Formatieren und ein bestimmtes Feld extrahieren
cat data.json | jq '.users[0].name'

# Eine API-Antwort formatieren
curl -s https://api.example.com/users | jq '.'

Wenn Sie regelmäßig mit JSON arbeiten und jq noch nicht installiert haben, tun Sie das jetzt. Es spart Ihnen unzählige Stunden.

Mit Node.js

# Schnelles Formatieren
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')),null,2))" < input.json

Tipps für die Arbeit mit JSON

Einrückung sorgfältig wählen

• 2-Leerzeichen-Einrückung: Kompakter, zeigt mehr Inhalt auf dem Bildschirm. Beliebt in JavaScript/TypeScript-Projekten und den meisten Web-Frameworks. In der meisten API-Dokumentation verwendet.
• 4-Leerzeichen-Einrückung: Leichter zu lesen bei tief verschachtelten Strukturen. Häufig in Python-Projekten und Enterprise-Java-Umgebungen.
• Tab-Einrückung: Technisch gültig, aber in JSON selten. Bleiben Sie bei Leerzeichen.

Für die meisten Webentwicklungen ist 2 Leerzeichen die praktische Wahl. Es bietet ausreichende visuelle Hierarchie ohne horizontalen Platz zu verschwenden.

Vor der Bereitstellung immer validieren

Validieren Sie JSON immer, bevor Sie es in der Produktion verwenden, besonders wenn Sie es manuell geschrieben oder geändert haben. Ein einziges fehlendes Komma oder nicht passendes Klammern kann eine gesamte Anwendung zum Absturz bringen. Unser Formatter erfasst Syntaxfehler im Moment des Einfügens und lässt Sie Probleme schnell erkennen.

JSON Schema für strukturelle Validierung verwenden

Wenn Sie eine API erstellen, die JSON-Eingaben akzeptiert, reicht einfaches Parsen nicht aus. JSON Schema ermöglicht es Ihnen, die erwartete Struktur, Typen und Einschränkungen zu definieren:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "name": { "type": "string", "minLength": 1 },
    "age": { "type": "integer", "minimum": 0 },
    "email": { "type": "string", "format": "email" }
  },
  "required": ["name", "email"]
}

Das erfasst fehlende Pflichtfelder, falsche Typen und Werte außerhalb des Bereichs — Dinge, die das einfache JSON-Parsen niemals erfassen wird.

Schlüssel für konsistente Diffs sortieren

Beim Vergleich zweier JSON-Objekte (in einem Code-Review oder einem Konfigurations-Diff) erzeugen unsortierte Schlüssel fehlerhafte Diffs. Viele Formatter, einschließlich unseres, bieten eine Option zum alphabetischen und rekursiven Sortieren von Objektschlüsseln. Das ist besonders nützlich für:

• Konfigurationsdateien in der Versionskontrolle (reduziert bedeutungslose Diffs)
• API-Antworten beim Debuggen vergleichen
• Test-Snapshots, die deterministisch sein müssen

Praktische JSON-Debugging-Szenarien

Eine API-Antwort debuggen

Sie haben eine curl-Anfrage gesendet und eine einzelne minifizierte JSON-Zeile erhalten. Um zu verstehen, was falsch gelaufen ist, müssen Sie zuerst die Struktur sehen:

curl -s https://api.example.com/users/123 | jq '.'

Oder fügen Sie die Antwort in den JSON-Formatter ein. Sie können dann sehen, ob die Antwortstruktur falsch ist, ob ein Feld fehlt oder ob ein Wert unerwartet ist.

Zwei JSON-Objekte vergleichen

Sie haben zwei API-Antworten, die identisch sein sollten, aber etwas unterscheidet sich. Formatieren Sie beide mit sortierten Schlüsseln und führen Sie dann einen Diff durch:

jq -S '.' response1.json > sorted1.json
jq -S '.' response2.json > sorted2.json
diff sorted1.json sorted2.json

Das -S-Flag sortiert Schlüssel alphabetisch, sodass strukturelle Unterschiede keinen Lärm in der Diff-Ausgabe erzeugen.

Kopier-Einfüge-Fehler beheben

Ein Kollege hat JSON in Slack eingefügt und typografische Anführungszeichen haben den Inhalt beschädigt. Fügen Sie es in den Formatter ein, der den Fehler (geschwungene Anführungszeichen statt gerader) hervorhebt, sodass Sie genau wissen, was zu beheben ist.

Das passiert öfter als man denkt. Chat-Apps, Textverarbeitungsprogramme und einige Texteditoren konvertieren " automatisch in typografische Anführungszeichen, die in JSON nicht gültig sind.

Daten aus einer großen JSON-Datei extrahieren

Sie haben eine mehrere Megabyte große JSON-Datei erhalten, aber benötigen nur einen kleinen Teil davon. Statt durch Tausende von Zeilen zu scrollen, verwenden Sie jq, um genau das zu extrahieren, was Sie benötigen:

# Die E-Mail-Adresse des ersten Benutzers abrufen
cat users.json | jq '.data.users[0].email'

# Alle Benutzernamen als flache Liste abrufen
cat users.json | jq '[.data.users[].name]'

# Benutzer nach Status filtern
cat users.json | jq '[.data.users[] | select(.status == "active")]'

JSON vs. andere Datenformate

Eigenschaft	JSON	YAML	XML	TOML
Lesbarkeit	Gut	Ausgezeichnet	Befriedigend	Gut
Kommentare	Nein	Ja	Ja	Ja
Datentypen	Grundlegend	Umfangreich	Zeichenkettenbasiert	Umfangreich
Dateigröße	Klein	Klein	Groß	Klein
Parse-Geschwindigkeit	Schnell	Mittel	Langsam	Schnell
Ökosystem	Riesig	Groß	Groß	Wächst

JSON gewinnt für API-Kommunikation und Datenaustausch dank seiner Einfachheit und universeller Parser-Unterstützung. YAML eignet sich besser für Konfigurationsdateien, bei denen Kommentare und Lesbarkeit wichtig sind. XML behauptet sich in Enterprise-Systemen und Dokumentformaten. TOML gewinnt an Boden bei der Konfiguration (Rusts Cargo, Pythons pyproject.toml).

Sicherheitsüberlegungen

Keine sensiblen Daten in Server-seitige Formatter einfügen

Einige Online-JSON-Formatter senden Ihre Daten zur Verarbeitung an einen Server. Wenn Sie mit API-Schlüsseln, Tokens, Passwörtern oder persönlichen Daten arbeiten, verwenden Sie nur einen clientseitigen Formatter, der alles im Browser verarbeitet. Unser Tool erledigt alle Formatierungen lokal — nichts wird jemals übertragen.

Auf JSON-Injection achten

Beim Erstellen von Anwendungen, die JSON-Eingaben akzeptieren, validieren und bereinigen Sie die Daten immer. Konstruieren Sie JSON niemals durch das Verketten von Zeichenketten:

// Gefährlich — JSON-Injection-Risiko
const json = '{"name": "' + userInput + '"}';

// Sicher
const json = JSON.stringify({ name: userInput });

Bei JSON.parse auf nicht vertrauenswürdige Daten aufpassen

JSON.parse() ist im Allgemeinen sicher (im Gegensatz zu eval()), aber die geparsten Daten können unerwartete Typen oder Strukturen haben. Validieren Sie immer die Form des geparsten JSON, bevor Sie es in Ihrer Anwendung verwenden.

Formatieren Sie Ihre JSON-Daten jetzt mit dem kostenlosen JSON-Formatter. Er läuft vollständig im Browser, unterstützt Syntaxhervorhebung und erfasst Fehler im Moment des Einfügens.