JSON Formatter/Validator

Ein kostenloses Online-Tool zur Validierung und Formatierung von JSON.

?JSON을 입력하세요

들여쓰기 크기:2 spaces4 spaces8 spaces

📝 입력 JSON

줄: 0문자: 0크기: 0 bytes

✨ 결과

JSON (JavaScript Object Notation)의 유효성을 검사하고 포맷팅합니다. 들여쓰기를 추가하여 가독성을 높이거나, 공백을 제거하여 크기를 줄일 수 있습니다.

Was ist JSON?

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenaustauschformat. Es ist für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen und zu generieren. Es wird weit verbreitet in Web-APIs, Konfigurationsdateien und Datenspeicherung verwendet.

Hauptfunktionen

• Validierung: Echtzeit-Erkennung von JSON-Syntaxfehlern
• Formatierung (Prettify): Verbesserte Lesbarkeit durch Einrückung
• Komprimierung (Minify): Größenreduzierung durch Entfernung von Leerzeichen
• Echtzeit-Statistiken: Anzeige von Zeilen, Zeichen und Byte-Größe
• Einrückungseinstellungen: Wahl zwischen 2/4/8 Leerzeichen
• Beispiel laden: Schnelltest mit Beispiel-JSON

Verwendung

JSON-Validierung

1. Fügen Sie JSON in den Eingabebereich ein
2. Die Validierung erfolgt in Echtzeit
3. Bei Fehlern wird eine detaillierte Fehlermeldung angezeigt

JSON-Formatierung

1. Geben Sie JSON ein
2. Wählen Sie die Einrückungsgröße (2/4/8 Leerzeichen)
3. Klicken Sie auf die Schaltfläche "Formatieren"
4. Das formatierte JSON wird ausgegeben

JSON-Komprimierung

1. Geben Sie JSON ein
2. Klicken Sie auf die Schaltfläche "Komprimieren"
3. JSON ohne Leerzeichen wird in einer Zeile ausgegeben

JSON-Grundsyntax

Datentypen

1. Objekt (Object)

{
  "name": "John",
  "age": 30
}

2. Array

["apple", "banana", "orange"]

3. String

"Hello World"

4. Number

42
3.14
-10

5. Boolean

true
false

6. null

null

Verschachtelte Struktur

{
  "user": {
    "name": "John Doe",
    "age": 30,
    "emails": ["john@example.com", "doe@example.com"],
    "address": {
      "city": "New York",
      "country": "USA"
    },
    "active": true,
    "lastLogin": null
  }
}

Häufige JSON-Fehler

1. Abschließendes Komma (Trailing Comma)

// ❌ Falsch
{
  "name": "John",
  "age": 30,  ← Letztes Komma
}

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

2. Fehlende Anführungszeichen

// ❌ Falsch
{
  name: "John"  ← Keine Anführungszeichen beim Schlüssel
}

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

3. Verwendung von einfachen Anführungszeichen

// ❌ Falsch
{
  'name': 'John'  ← Einfache Anführungszeichen
}

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

4. Verwendung von Kommentaren

// ❌ Falsch
{
  // Dies ist ein Kommentar
  "name": "John"
}

// ✅ JSON unterstützt keine Kommentare
// Verwenden Sie JSONC oder JSON5

5. Undefinierte Werte

// ❌ Falsch
{
  "name": "John",
  "age": undefined  ← undefined existiert nicht in JSON
}

// ✅ Richtig (null verwenden)
{
  "name": "John",
  "age": null
}

Anwendungsfälle

1. API-Response-Debugging

// Formatieren Sie die von der API erhaltene Antwort zur Überprüfung
{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "John"},
      {"id": 2, "name": "Jane"}
    ]
  }
}

2. Konfigurationsdateien erstellen

// package.json, tsconfig.json usw.
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0"
  }
}

3. Datenspeicherung

// Local Storage, Dateispeicherung usw.
{
  "theme": "dark",
  "language": "de",
  "notifications": true
}

4. Log-Analyse

// Strukturierte Logs
{
  "timestamp": 1640995200,
  "level": "error",
  "message": "Verbindung fehlgeschlagen",
  "details": {
    "host": "api.example.com",
    "port": 443
  }
}

5. Testdaten

// Mock-Daten erstellen
{
  "users": [
    {"id": 1, "name": "Testbenutzer 1"},
    {"id": 2, "name": "Testbenutzer 2"}
  ]
}

Verwendung nach Programmiersprache

JavaScript

// JSON → Objekt (Parsen)
const obj = JSON.parse('{"name":"John","age":30}');
console.log(obj.name); // "John"

// Objekt → JSON (Stringify)
const json = JSON.stringify(obj);
console.log(json); // '{"name":"John","age":30}'

// Formatierung (Einrückung 2)
const formatted = JSON.stringify(obj, null, 2);

Python

import json

# JSON → Dictionary
data = json.loads('{"name":"John","age":30}')
print(data['name'])  # "John"

# Dictionary → JSON
json_str = json.dumps(data)

# Formatierung
formatted = json.dumps(data, indent=2)

PHP

<?php
// JSON → Array
$data = json_decode('{"name":"John","age":30}', true);
echo $data['name'];  // "John"

// Array → JSON
$json = json_encode($data);

// Formatierung
$formatted = json_encode($data, JSON_PRETTY_PRINT);
?>

Java

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

// JSON → Objekt
Gson gson = new Gson();
User user = gson.fromJson(jsonString, User.class);

// Objekt → JSON
String json = gson.toJson(user);

// Formatierung
Gson prettyGson = new GsonBuilder().setPrettyPrinting().create();
String formatted = prettyGson.toJson(user);

C#

using System.Text.Json;

// JSON → Objekt
var user = JsonSerializer.Deserialize<User>(jsonString);

// Objekt → JSON
var json = JsonSerializer.Serialize(user);

// Formatierung
var options = new JsonSerializerOptions { WriteIndented = true };
var formatted = JsonSerializer.Serialize(user, options);

Formatierung vs. Komprimierung

Formatierung (Prettify)

Vorteile:

• Für Menschen leicht lesbar
• Einfaches Debugging
• Leichte Strukturerkennung

Nachteile:

• Größere Dateigröße
• Ineffizient bei Netzwerkübertragung

Verwendungszeitpunkt:

• Entwicklung/Debugging
• Konfigurationsdateien
• Dokumentation

Komprimierung (Minify)

Vorteile:

• Reduzierte Dateigröße (ca. 30-50%)
• Effiziente Netzwerkübertragung
• Speicherplatzeinsparung

Nachteile:

• Schwer lesbar für Menschen
• Schwieriges Debugging

Verwendungszeitpunkt:

• Produktionsumgebung
• API-Antworten
• Große Datenmengen

Praktische Tipps

1. Große JSON-Dateien verarbeiten

// Streaming-Parsing verwenden
const stream = fs.createReadStream('large.json');
const parser = JSONStream.parse('*');
stream.pipe(parser);

2. Zirkuläre Referenzen behandeln

const obj = {};
obj.self = obj; // Zirkuläre Referenz

// Fehler tritt auf
// JSON.stringify(obj); // TypeError

// Mit benutzerdefiniertem Replacer lösen
const json = JSON.stringify(obj, (key, value) => {
  if (key === 'self') return undefined;
  return value;
});

3. Date-Objekte verarbeiten

const data = {
  name: "John",
  created: new Date()
};

// Date → ISO 8601 String
const json = JSON.stringify(data);
// {"name":"John","created":"2022-01-01T00:00:00.000Z"}

4. Nur bestimmte Felder serialisieren

const user = {
  name: "John",
  password: "secret",
  age: 30
};

// Passwort ausschließen
const json = JSON.stringify(user, ['name', 'age']);
// {"name":"John","age":30}

5. Vergleich vor und nach Komprimierung

const data = { /* Komplexes Objekt */ };

const formatted = JSON.stringify(data, null, 2);
console.log(formatted.length); // 1500

const minified = JSON.stringify(data);
console.log(minified.length); // 850

// Etwa 43% Reduzierung!

JSON vs. andere Formate

JSON vs. XML

Merkmal	JSON	XML
Lesbarkeit	Kompakter	Ausführlicher
Parse-Geschwindigkeit	Schnell	Langsam
Datentypen	Native Unterstützung	Nur Strings
Attribute	Keine	Ja
Kommentare	Keine	Ja

JSON vs. YAML

Merkmal	JSON	YAML
Lesbarkeit	Mittel	Sehr gut
Syntax	Streng	Flexibel
Kommentare	Keine	Ja
Komplexe Struktur	Möglich	Einfacher
Parse-Geschwindigkeit	Schnell	Langsam

Häufig gestellte Fragen

F: Kann ich Kommentare zu JSON hinzufügen?

Standard-JSON unterstützt keine Kommentare. Alternativen:

• JSONC: JSON mit Kommentarunterstützung, verwendet in VS Code usw.
• JSON5: Unterstützt JavaScript-Style-Kommentare

F: Was ist die maximale Größe von JSON?

Es gibt theoretisch keine Begrenzung, aber praktisch:

• Browser: Etwa 10-100 MB (variiert je nach Browser)
• Node.js: Etwa 512 MB (V8-Engine-Standard)
• Speicherbeschränkung: Abhängig vom Systemspeicher

F: Wie stelle ich Daten in JSON dar?

Die Standardmethode ist ein ISO 8601-String:

{"date": "2022-01-01T00:00:00.000Z"}

F: Was ist der Unterschied zwischen undefined und null in JSON?

• null: Gültiger Wert in JSON
• undefined: Nicht unterstützt in JSON (wird weggelassen oder in null konvertiert)

F: Wird die Formatierung die Leistung verlangsamen?

Geringfügig langsamer, aber vernachlässigbar. Es wird empfohlen, während der Entwicklung Formatierung und in der Produktion Komprimierung zu verwenden.

F: Was ist, wenn die JSON-Datei ein BOM hat?

BOM (Byte Order Mark) sollte entfernt werden:

const json = text.replace(/^\uFEFF/, '');

Verwandte Tools

• Base64 Encoder - JSON zu Base64 kodieren
• URL Encoder - JSON sicher in URL kodieren
• Text Comparison - Zwei JSONs vergleichen

Leistung

• Parse-Geschwindigkeit: Unter Millisekunden (normale Größe)
• Formatierungsgeschwindigkeit: Sofort
• Komprimierungsgeschwindigkeit: Sofort
• Speichernutzung: Minimal

Browser-Kompatibilität

JSON.parse() und JSON.stringify() werden von allen modernen Browsern unterstützt:

• Chrome (alle Versionen) ✓
• Firefox (alle Versionen) ✓
• Safari (alle Versionen) ✓
• Edge (alle Versionen) ✓
• IE 8+ ✓

Datenschutz

Dieses Tool arbeitet vollständig clientseitig. Ihr eingegebenes JSON wird nicht an den Server gesendet und nur im Browser verarbeitet.

💬 War dieses Tool hilfreich?

Wenn Sie Fragen oder Verbesserungsvorschläge haben, geben Sie uns gerne Feedback!