JSON Formatter & Validator Praxisleitfaden

"Diese API-Antwort... ich kann nicht verstehen, wo was ist."

Haben Sie schon einmal eine JSON-Antwort erhalten, die in einer einzigen Zeile komprimiert war? Ein bestimmtes Feld in einem 3.000 Zeichen langen verschachtelten Objekt zu finden, ist ein Albtraum.

JSON Formatter lost dieses Problem. Und Validator beantwortet die Frage "Warum lasst sich das nicht parsen?"

---

JSON in 30 Sekunden

Datentypen

{
  "string": "Text",
  "number": 42,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {"nested": "value"}
}

Kernregeln (Haufige Fehler)

---

Minifiziert vs Formatiert

Tatsachliche API-Antwort (Minifiziert)

{"users":[{"id":1,"name":"Max Mustermann","email":"max@dev.com","profile":{"avatar":"https://cdn.example.com/1.jpg","bio":"Full-Stack-Entwickler"}}],"pagination":{"total":150,"page":1,"limit":10}}

Konnen Sie das lesen?

Nach dem Formatter (Formatiert)

{
  "users": [
    {
      "id": 1,
      "name": "Max Mustermann",
      "email": "max@dev.com",
      "profile": {
        "avatar": "https://cdn.example.com/1.jpg",
        "bio": "Full-Stack-Entwickler"
      }
    }
  ],
  "pagination": {
    "total": 150,
    "page": 1,
    "limit": 10
  }
}

Die Struktur ist sichtbar. Sie konnen sofort erkennen, wo users[0].profile.bio ist.

---

5 Haufige JSON-Fehler

1. Trailing Comma (Abschliessendes Komma)

Der haufigste Fehler. In JavaScript erlaubt, aber in JSON ein Fehler.

// Fehler: Unexpected token }
{
  "name": "Max Mustermann",
  "age": 30,
}

// Korrigiert
{
  "name": "Max Mustermann",
  "age": 30
}

2. Einfache Anfuhrungszeichen

// Fehler: Unexpected token '
{'name': 'Max Mustermann'}

// Korrigiert
{"name": "Max Mustermann"}

3. Schlussel ohne Anfuhrungszeichen

// Fehler: Unexpected token n
{name: "Max Mustermann"}

// Korrigiert
{"name": "Max Mustermann"}

4. Nicht-escapte Zeichen

// Fehler: Zeilenumbruche, Tabs, usw.
{"message": "Hallo
Welt"}

// Korrigiert
{"message": "Hallo\nWelt"}

5. Ungultiges Zahlenformat

// Fehler
{"value": 007}       // fuhrende Null
{"hex": 0xFF}        // Hexadezimal

// Korrigiert
{"value": 7}
{"hex": "0xFF"}      // als String

---

Praxis: Formatierung im Code

JavaScript

// API-Antworten debuggen
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // Leicht lesbar in der Konsole
    console.log(JSON.stringify(data, null, 2));
  });

Das dritte Argument von JSON.stringify(data, null, 2):

• 2: 2-Leerzeichen-Einruckung
• 4: 4-Leerzeichen-Einruckung
• '\t': Tab-Einruckung

Bestimmte Felder extrahieren

const user = {
  id: 1,
  name: "Max Mustermann",
  password: "secret123",
  email: "max@dev.com"
};

// Ausgabe ohne Passwort
console.log(JSON.stringify(user, ['id', 'name', 'email'], 2));

Ausgabe:

{
  "id": 1,
  "name": "Max Mustermann",
  "email": "max@dev.com"
}

---

JSON auf der Kommandozeile

jq - Das Schweizer Taschenmesser fur JSON

# Installation
brew install jq      # macOS
apt install jq       # Ubuntu

# Formatierung
cat response.json | jq .

# Bestimmtes Feld extrahieren
cat response.json | jq '.users[0].name'

# Arrays filtern
cat response.json | jq '.users[] | select(.age > 30)'

# Felder in neues Objekt auswahlen
cat response.json | jq '.users[] | {name, email}'

Python

# Datei validieren + formatieren
python -m json.tool data.json

# Per Pipe verarbeiten
curl https://api.example.com/users | python -m json.tool

Node.js

# Prufen, ob die Datei gultiges JSON ist
node -e "require('./data.json')"

---

Strukturvalidierung mit JSON Schema

Uber die einfache Syntaxprufung hinaus konnen Sie Datenstruktur und Typen validieren.

Schema-Definition

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": {
      "type": "string",
      "minLength": 2,
      "maxLength": 50
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    }
  }
}

Validierung in JavaScript (ajv)

import Ajv from 'ajv';
import addFormats from 'ajv-formats';

const ajv = new Ajv();
addFormats(ajv);

const validate = ajv.compile(schema);

const data = {
  name: "Max Mustermann",
  email: "ungultige-email",
  age: -5
};

if (!validate(data)) {
  console.log(validate.errors);
  // [
  //   { keyword: 'format', message: 'must match format "email"' },
  //   { keyword: 'minimum', message: 'must be >= 0' }
  // ]
}

---

IDE/Editor-Einstellungen

VSCode

# Auto-Format-Tastenkombination
Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

# Auto-Format beim Speichern (settings.json)
"[json]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

JetBrains (IntelliJ, WebStorm)

# Auto-Format
Windows/Linux: Ctrl + Alt + L
Mac: Cmd + Option + L

---

FAQ

Q: Ich mochte Kommentare zu JSON hinzufugen

A: Standard-JSON unterstutzt keine Kommentare. Alternativen:

1. JSONC (JSON with Comments): Verwendet in VSCode-Konfigurationsdateien usw.
2. JSON5: Erlaubt Kommentare, abschliessende Kommas, einfache Anfuhrungszeichen
3. Separates Feld: "_comment": "Beschreibung"

{
  "_comment": "Diese Konfiguration ist fur die Entwicklung",
  "debug": true
}

Q: Meine grosse JSON-Datei lasst sich nicht offnen

A: Normale Editoren frieren bei Dateien von mehreren Dutzend MB ein. Alternativen:

• jq: Streaming-Verarbeitung
• fx: Terminal-interaktiver Viewer (npm i -g fx)
• Online-Tools: Dedizierte Viewer fur grosse JSON-Dateien

Q: Kann ich die gesamte API-Antwort loggen?

A: In der Produktion gefahrlich.

// Falsch: Kann sensible Daten preisgeben
console.log(JSON.stringify(apiResponse));

// Richtig: Sensible Felder maskieren
const sanitize = (obj) => JSON.stringify(obj, (key, val) =>
  ['password', 'token', 'secret'].includes(key) ? '***' : val
);

---

Zusammenfassung

---

Verwandte Werkzeuge