JSON Editor – Formatieren, Validieren & Visualisieren

Inhaltsverzeichnis

             Schnellübersicht
            JSON Editor: Eingabe, Formatierung, Validierung
Formatieren: Pretty-Print mit 2/4 Spaces oder Tabs
Minifizieren: Kompakte Ausgabe für Produktion
Validierung: Live-Fehlererkennung mit Zeilennummer
Tree-Ansicht: Collapsible Hierarchie zum Erkunden
Statistiken: Zeichen, Zeilen, Größe, Typen
Theorie: Was ist JSON? (Anfängerfreundlich)
Geschichte: Von JavaScript zu weltweitem Standard
FAQ: Häufige Fragen zu JSON

        

1. JSON Editor

Gib JSON ein oder lade ein Beispiel – die Verarbeitung erfolgt live.

Einrückung:

Schlüssel sortieren

Live-Validierung

Tree-Ansicht zeigen

Eingabe

0 Zeichen 0 Zeilen

Ausgabe

0 Zeichen 0 Zeilen

Gib JSON ein, um zu beginnen

Tree-Ansicht

Lade gültiges JSON, um die Tree-Ansicht zu sehen

Wussten Sie schon?

JSON wurde von Douglas Crockford um 2001 herum populär gemacht – inspiriert von JavaScript.
Die JSON-Syntax ist eine Teilmenge der JavaScript-Objektschreibweise (ECMAScript).
JSON hat keine Kommentare – anders als JavaScript-Objekte.
Trailing Commas (Komma vor schließender Klammer) sind in JSON nicht erlaubt.
JSON.parse() ist schneller als eval() – und sicherer!

2. Theorie – JSON einfach erklärt

Verstehe die Grundlagen von JSON – ohne Vorkenntnisse.

Was ist JSON?

JSON (JavaScript Object Notation) ist ein Textformat zum Datenaustausch:

Menschenlesbar: Einfach zu lesen und zu schreiben
Sprachunabhängig: Funktioniert in fast allen Programmiersprachen
Kompakt: Weniger Overhead als XML
Standard: RFC 8259, ECMA-404

{"name": "Max", "alter": 30}

Warum braucht man JSON?

JSON ist der Standard für moderne APIs:

REST-APIs: Fast alle nutzen JSON
Web-Anwendungen: Fetch, AJAX, WebSocket
Konfigurationen: package.json, tsconfig.json
NoSQL-Datenbanken: MongoDB, CouchDB
Logs: Structured Logging

Ersetzt XML fast vollständig in modernen APIs

JSON-Datentypen

JSON kennt 6 Datentypen:

String: "Hallo"
Number: 42 oder 3.14
Boolean: true / false
Null: null
Object: {"key": "value"}
Array: [1, 2, 3]

Kein undefined, Date, Function oder Comment!

JSON-Regeln

Doppelte Anführungszeichen: Nur ", nicht '
Kein trailing comma: [1, 2, 3] nicht [1, 2, 3,]
Keine Kommentare: Weder // noch /* */
Schlüssel sind Strings: {"key": 1}
Kein NaN/Infinity: Nicht erlaubt
UTF-8 kodiert: Standard-Encoding

Korrekt: {"a": 1, "b": 2}

Wussten Sie schon? JSON wurde von Douglas Crockford um 2001 herum populär gemacht, aber die Syntax ist so einfach, dass sie nie offiziell patentiert wurde. Die Idee entstand, weil Crockford ein Format brauchte, das ohne JavaScript-Parser in anderen Sprachen gelesen werden konnte. Heute ist JSON die dominierende Datenaustausch-Format im Web – über 80% aller APIs nutzen JSON. Fun Fact: Der MIME-Type application/json wurde erst 2006 offiziell registriert!

3. JSON vs. XML im Vergleich

JSON hat XML in modernen APIs fast vollständig abgelöst. Die wichtigsten Unterschiede:

Aspekt	JSON	XML
Lesbarkeit	✅ Sehr gut	⚠️ Umständlich
Größe	✅ Kompakt	❌ Aufgebläht
Parsing-Geschwindigkeit	✅ Sehr schnell	⚠️ Langsamer
Datentypen	6 (String, Number, Boolean, Null, Object, Array)	Nur Text (Typen über Attribute)
Attribute	❌ Nicht vorhanden	✅ Über Attribute
Kommentare	❌ Nicht erlaubt	✅ Über <!-- -->
Namespaces	❌ Nicht vorhanden	✅ Über xmlns
Verbreitung	✅ Dominierend in Web-APIs	⚠️ Legacy & Enterprise
Verwendung	REST-APIs, Configs, Logs	SOAP, RSS, SVG, DOCX

Wann XML statt JSON?

SOAP-APIs: Enterprise-Systeme wie SAP oder Microsoft nutzen oft SOAP/XML.
Dokumentenformate: DOCX, XLSX, SVG sind ZIP-Dateien mit XML-Inhalt.
RSS/Atom-Feeds: Basieren auf XML.
Konfigurationen: Maven, Ant, Spring nutzen XML.
Komplexe Datenstrukturen: XML mit Attributen und Namespaces kann komplexe Beziehungen besser abbilden.

4. Geschichte von JSON

Von JavaScript zu einem weltweiten Standard für Datenaustausch.

1996

JavaScript entsteht

Brendan Eich entwickelt JavaScript bei Netscape. Die Objekt-Literal-Syntax {} wird Teil der Sprache – die Basis für JSON.

2001

Douglas Crockford und JSON

Douglas Crockford entdeckt die Objekt-Literal-Syntax als universelles Datenformat. Er nennt es JSON und gründet json.org. Die erste Standardisierung erfolgt.

2005

AJAX und der Durchbruch

AJAX (Asynchronous JavaScript and XML) wird populär – trotz des Namens verwenden die meisten Entwickler JSON statt XML. JSON setzt sich als bevorzugtes Format für Web-APIs durch.

2006

RFC 4627

RFC 4627 standardisiert JSON offiziell als application/json. Der MIME-Type wird von der IANA registriert. JSON wird zum Internet-Standard.

2013

ECMA-404

ECMA-404 wird als offizieller Standard veröffentlicht. JSON ist nun sowohl ein RFC als auch ein ECMA-Standard. Es gibt minimale Unterschiede in der strikten Interpretation.

2014

JSON5 und Alternativen

Das Community-Format JSON5 erweitert JSON um Kommentare, Single Quotes und Trailing Commas. Es wird für Konfigurationsdateien populär (z.B. tsconfig.json unterstützt Kommentare).

Heute

Weltweiter Standard

JSON ist das dominierende Format für APIs, Konfigurationen und Datenaustausch. Über 80% aller APIs nutzen JSON. Neue Formate wie JSON Schema, JSON Patch und JSON-LD erweitern den Standard.

5. FAQ – Spannende Fragen & Antworten

Häufige Fragen zu JSON

Was ist der Unterschied zwischen JSON und JavaScript-Objekten?

Die Syntax ist ähnlich, aber es gibt wichtige Unterschiede:

Aspekt	JSON	JavaScript-Objekt
Anführungszeichen	Nur `"`	`"`, `'` oder Backtick
Schlüssel	Immer Strings	Kann Identifier sein
Trailing Comma	❌ Verboten	✅ Erlaubt
Kommentare	❌ Verboten	✅ Erlaubt (//, /* */)
Funktionen	❌ Nicht erlaubt	✅ Erlaubt
undefined	❌ Nicht erlaubt	✅ Erlaubt
NaN / Infinity	❌ Nicht erlaubt	✅ Erlaubt
Date-Objekte	❌ Nur als String	✅ Erlaubt

Beispiel JavaScript-Objekt (KEIN gültiges JSON):

const person = {
  name: 'Max',          // Single Quotes
  alter: 30,
  hobbies: ['Sport'],   // Trailing Comma OK
}; // Kommentar

Gleiche Daten als gültiges JSON:

{
  "name": "Max",
  "alter": 30,
  "hobbies": ["Sport"]
}

Faustregel: Alles, was JSON ist, ist auch ein JavaScript-Objekt-Literal. Aber nicht umgekehrt!

Warum sind Kommentare in JSON nicht erlaubt?

Das ist eine bewusste Design-Entscheidung von Douglas Crockford:

Die Gründe:

Einfachheit: JSON soll so einfach wie möglich sein
Parser-Komplexität: Kommentare machen Parser komplizierter
Missbrauch verhindern: JSON soll reines Datenformat sein, keine Config-Sprache
Metadaten: Kommentare sollten nicht als Daten verwendet werden

Crockfords berühmtes Zitat:

"Ich habe Kommentare aus JSON entfernt, weil ich gesehen habe, dass Leute sie benutzen, um Parsing-Anweisungen zu speichern. Das ist eine schlechte Idee."

Alternativen, wenn du Kommentare brauchst:

JSON5: Erweiterung mit Kommentaren (für Configs)
JSONC: JSON mit Kommentaren (VS Code)
YAML: Unterstützt Kommentare nativ
_comment-Felder: Als Workaround in JSON
Externe Dokumentation: README neben der JSON-Datei

Praxis: tsconfig.json, .vscode/settings.json und ähnliche Config-Dateien unterstützen oft Kommentare (JSONC), aber nur weil die Tools es erlauben – nicht weil JSON es standardmäßig erlaubt.

Was ist JSONP und warum ist es gefährlich?

JSONP (JSON with Padding) war eine Umgehung der Same-Origin-Policy:

Das Problem (früher):

Browser erlauben kein Cross-Origin AJAX
Aber <script src="..."> funktioniert cross-origin
Entwickler nutzten das für Cross-Origin-Daten

Wie JSONP funktioniert:

// Statt: fetch('/api/data')
// Wird geladen:
<script src="/api/data?callback=myFunction">
// Server antwortet:
myFunction({"name": "Max", "alter": 30});

Warum ist JSONP gefährlich?

XSS-Angriffe: Der Server kann beliebigen JavaScript-Code senden
Kein Content-Type-Check: Alles wird ausgeführt
Cookie-Leak: Cookies werden mitgesendet
Keine Fehlerbehandlung: Kaum Kontrolle über Timeouts

Die moderne Lösung: CORS

CORS (Cross-Origin Resource Sharing) ist der Standard
Server erlaubt explizit Cross-Origin-Zugriffe
Kein Umweg über <script>-Tags
Sicherer und flexibler

// Server-Header für CORS:
Access-Control-Allow-Origin: https://meine-domain.de

Fazit: JSONP ist veraltet und unsicher. Verwende immer CORS!

Was ist JSON Schema?

JSON Schema ist ein Standard zur Beschreibung und Validierung von JSON-Daten:

Zweck:

Validierung: Prüft, ob JSON der Struktur entspricht
Dokumentation: Selbst-dokumentierende APIs
Code-Generierung: Typen in TypeScript, Java, Python
Formulare: HTML-Formulare automatisch generieren

Beispiel:

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

Was wird validiert?

type: string, number, integer, boolean, object, array, null
properties: Definition der Felder
required: Pflichtfelder
minimum/maximum: Wertebereich
pattern: Regex-Muster
enum: Erlaubte Werte
format: email, date, uri, uuid

Verwendung:

OpenAPI/Swagger: API-Dokumentation
Ajv: JavaScript-Validator
jsonschema: Python-Bibliothek
VS Code: Autovervollständigung in JSON-Dateien

Nutzen: Fehler früh erkennen, APIs dokumentieren, Code-Generierung automatisieren.

Wie formatiere ich große JSON-Dateien effizient?

Bei großen JSON-Dateien (ab 1 MB) gibt es einige Herausforderungen:

Probleme:

Browser-Performance: Ab ~10 MB wird der Editor langsam
Speicher: Doppelte Daten im Speicher (Roh + geparst)
Darstellung: Syntax-Highlighting wird teuer

Tipps für große Dateien:

Streaming-Parser: Bibliotheken wie stream-json oder ijson
Kommandozeile: jq, python -m json.tool, json_pp
Node.js: JSON.parse ist schneller als im Browser
Chunking: In kleinere Teile aufteilen
Spezial-Editoren: VS Code, Sublime Text mit JSON-Plugins

Beispiel mit jq (Kommandozeile):

# Formatieren
jq . große-datei.json > formatiert.json

# Minifizieren
jq -c . große-datei.json > minified.json

# Nur bestimmte Felder
jq '.items[] | {name, price}' große-datei.json

Python-Beispiel:

import json

with open('gross.json') as f:
    data = json.load(f)

with open('formatiert.json', 'w') as f:
    json.dump(data, f, indent=2, ensure_ascii=False)

Für sehr große Dateien (>100 MB):

Streaming: Zeilenweise verarbeiten
Datenbank: In SQLite oder MongoDB importieren
Split: In mehrere kleinere Dateien aufteilen

Was sind die häufigsten JSON-Fehler?

Diese Fehler sehe ich am häufigsten:

1. Trailing Commas

❌ { "a": 1, "b": 2, }
✅ { "a": 1, "b": 2 }

2. Single Quotes

❌ { 'name': 'Max' }
✅ { "name": "Max" }

3. Kommentare

❌ { "a": 1 } // Kommentar
✅ { "a": 1 }

4. Unquotierte Schlüssel

❌ { name: "Max" }
✅ { "name": "Max" }

5. undefined, NaN, Infinity

❌ { "a": undefined, "b": NaN }
✅ { "a": null, "b": 0 }

6. Falsche Zahlen-Formate

❌ { "hex": 0xFF, "oct": 0755, "leading": 007 }
✅ { "hex": 255, "oct": 493, "leading": 7 }

7. Fehlende Kommas

❌ { "a": 1 "b": 2 }
✅ { "a": 1, "b": 2 }

8. Unescaped Zeichen

❌ { "path": "C:\Users\Max" }
✅ { "path": "C:\\Users\\Max" }

9. BOM am Anfang

Manche Editoren fügen eine BOM hinzu – JSON-Parser scheitern daran. Verwende UTF-8 ohne BOM.

10. Falsche Encoding

JSON muss UTF-8 kodiert sein. Umlaute können in anderen Kodierungen Fehler verursachen.

Was ist der Unterschied zwischen JSON.parse und eval?

Beide wandeln JSON-Strings in JavaScript-Objekte um, aber eval ist gefährlich:

Aspekt	JSON.parse	eval
Geschwindigkeit	✅ Sehr schnell	❌ Langsam
Sicherheit	✅ Sicher	❌ Extrem gefährlich
Akzeptiert	Nur gültiges JSON	Beliebigen JavaScript-Code
Funktionen	❌ Nicht erlaubt	✅ Wird ausgeführt
XSS-Anfällig	✅ Nein	❌ Ja

Warum ist eval gefährlich?

// Angreifer sendet:
const bösartig = '{"name": "Max", "action": alert("Hacked!")}';

// Mit eval:
eval('(' + bösartig + ')');  // 💥 Alert wird ausgeführt!

// Mit JSON.parse:
JSON.parse(bösartig);  // ✅ Fehler: Ungültiges JSON

Warum ist eval so gefährlich?

Beliebiger Code: Kann alles ausführen – Netzwerk, Cookies, DOM
XSS-Angriffe: Cross-Site-Scripting wird möglich
Datenlecks: Kann Daten an Angreifer senden
Kein Sandbox: Voller Zugriff auf die Seite

Historisch: Vor JSON.parse (2009 in ECMAScript 5) verwendeten Entwickler eval(). Das war eine der größten Sicherheitslücken im frühen Web.

Best Practice:

// ✅ IMMER JSON.parse verwenden:
try {
  const data = JSON.parse(jsonString);
  console.log(data);
} catch (e) {
  console.error('Ungültiges JSON:', e.message);
}

// ❌ NIEMALS eval für JSON:
// eval('(' + jsonString + ')');  // GEFÄHRLICH!

Merksatz: eval() ist böse – verwende es niemals für JSON!

Zusammenfassung

Die wichtigsten Punkte

JSON: Leichtgewichtiges Datenaustauschformat (RFC 8259)
6 Datentypen: String, Number, Boolean, Null, Object, Array
Regeln: Doppelte Anführungszeichen, keine Kommentare, kein Trailing Comma
Standard: Über 80% aller Web-APIs nutzen JSON
JSON.parse: Sicher – niemals eval() verwenden!
JSON Schema: Für Validierung und Dokumentation
Formatieren: Für Menschen, Minifizieren für Produktion
UTF-8: Standard-Encoding ohne BOM
Unser Tool: Live-Editor mit Formatierung, Validierung und Tree-Ansicht

Weitere Tools

Image to Base64

Konvertiere Bilder in Base64-Data-URLs für HTML, CSS und JSON.

Zum Tool

Hash Generator

MD5, SHA-1, SHA-256 und SHA-512 für Text und Dateien.

Zum Tool

.gitignore Generator

Erstelle .gitignore-Dateien für alle gängigen Sprachen und Tools.

Zum Tool

Unicode-Konverter

Konvertiere zwischen Unicode-Zeichen, Codepoints und UTF-8.

Zum Tool