JSON in JavaScript: JSON.stringify & JSON.parse

JSON ist Text – kein JavaScript-Objekt

JSON (JavaScript Object Notation) ist ein Textformat für den Datenaustausch. Es sieht zwar aus wie ein JavaScript-Objektliteral, ist aber tatsächlich ein String – also eine Zeichenkette, die du übers Netzwerk verschicken, in eine Datei speichern oder in eine Konfiguration einfügen kannst.

// Ein JavaScript-Objekt – ein lebendiger Wert im Speicher.
const user = { name: "Rosa", age: 30 };

// JSON – eine Zeichenkette, die dieselben Daten darstellt.
const json = '{"name":"Rosa","age":30}';

Die beiden werden gerne verwechselt, weil sie sich so ähnlich sehen. Als Eselsbrücke hilft folgendes Bild: Objekte leben in deinem Programm; JSON ist das, was sie anziehen, wenn sie das Haus verlassen. Umgewandelt wird mit zwei Funktionen: JSON.stringify (Objekt → String) und JSON.parse (String → Objekt).

JSON.stringify: JavaScript-Objekt in JSON umwandeln

So machst du aus einem beliebigen JavaScript-Wert seine JSON-Repräsentation:

Das Ergebnis ist ein einzeiliger String ohne Leerzeichen – kompakt und perfekt für die Übertragung über das Netzwerk. Die Prüfung mit typeof bestätigt es: string, kein object.

Zum Debuggen, wenn du's lesbar brauchst, übergibst du einfach zwei zusätzliche Argumente. Das zweite ist ein Replacer (dazu gleich mehr); mit null sagst du „nimm alles mit". Das dritte steuert die Einrückung:

Das ist die übliche Form für Pretty-Printing. Nimm 2 oder 4 Leerzeichen – das entspricht dem, was die meisten Tools ausgeben.

JSON.parse: JSON-String in JavaScript-Objekt umwandeln

Der umgekehrte Weg: Du übergibst einen JSON-String und bekommst einen JavaScript-Wert zurück.

Sobald der String geparst ist, hast du es mit einem ganz normalen JavaScript-Objekt zu tun – Punkt-Notation, eckige Klammern, Array-Methoden, alles funktioniert wie gewohnt.

JSON.parse ist allerdings pingelig. Die folgenden Fälle werfen allesamt einen SyntaxError:

JSON.parse("{name: 'Rosa'}");      // Schlüssel ohne Anführungszeichen, einfache Anführungszeichen
JSON.parse('{"name": "Rosa",}');   // nachgestelltes Komma
JSON.parse("// a comment\n{}");    // Kommentare sind nicht erlaubt
JSON.parse("");                    // leerer String

Wenn die Daten von außerhalb deines Programms kommen — etwa aus einer fetch-Antwort, einer Datei oder einer Nutzereingabe — solltest du JSON.parse immer in ein try/catch packen:

Werte, die den Round Trip nicht überleben

JSON kennt nur sechs Wertetypen: Strings, Zahlen, Booleans, null, Arrays und einfache Objekte. Alles andere aus JavaScript wird beim Umwandeln entweder verworfen, verändert – oder bricht komplett ab.

Was genau passiert:

• Funktionen und undefined werden stillschweigend aus Objekten entfernt. In Arrays werden sie zu null – in JSON darf es keine Lücken in Arrays geben.
• Date-Objekte werden über ihre toJSON-Methode zu einem ISO-String serialisiert. Beim Parsen bekommst du allerdings nur den String zurück, kein echtes Date.
• BigInt wirft einen TypeError. Für JSON-Zahlen gibt es schlicht kein Äquivalent.
• Map, Set und zirkuläre Referenzen funktionieren ebenfalls nicht out of the box.

Damit Date den Round-Trip überlebt, hilft die Reviver-Funktion von JSON.parse:

Die Reviver-Funktion läuft für jedes Schlüssel-Wert-Paar durch und erlaubt es dir, Werte beim Einlesen direkt zu transformieren.

Der Replacer: Steuern, was serialisiert wird

Mit dem zweiten Argument von JSON.stringify legst du fest, was tatsächlich im Output landet. Übergibst du ein Array von Schlüsseln, werden nur diese übernommen (Whitelist):

Oder du übergibst eine Funktion für beliebige Logik – Felder weglassen, Werte maskieren oder direkt im Vorbeigehen transformieren:

Wenn du undefined zurückgibst, wird der Key komplett entfernt. Jeder andere Rückgabewert ersetzt den ursprünglichen Wert.

Ausgabe anpassen mit toJSON

Besitzt ein Objekt eine toJSON-Methode, ruft JSON.stringify diese automatisch auf und serialisiert stattdessen den Rückgabewert. Genau auf diesem Weg steuert auch Date sein eigenes Ausgabeformat – und du kannst dir denselben Hook zunutze machen:

Super praktisch für Klassen, die nach außen hin immer dieselbe Struktur haben sollen – egal, wer sie gerade serialisiert.

Deep Clone (der alte Trick und die bessere Variante)

Jahrelang war JSON.parse(JSON.stringify(obj)) der Einzeiler, um ein einfaches Objekt tief zu klonen:

Das klappt – solange das Objekt ausschließlich JSON-taugliche Werte enthält. Bei Dates, Maps und Funktionen geht es schief (siehe die Round-Trip-Probleme weiter oben).

Im modernen JavaScript gibt es dafür structuredClone. Damit lassen sich Dates, Maps, Sets, Typed Arrays und sogar zirkuläre Referenzen problemlos klonen:

Greif zu structuredClone, wann immer es geht. Den Trick mit JSON.parse(JSON.stringify(...)) behältst du als Notlösung für schnelle, unkomplizierte Klone einfacher Daten in der Hinterhand.

Ein realistisches Beispiel: Daten per fetch holen und parsen

Am häufigsten begegnet dir JSON im Umgang mit HTTP. fetch parst JSON nicht automatisch für dich — du musst .json() auf dem Response-Objekt aufrufen (was intern nichts anderes macht als JSON.parse auf den Response-Body anzuwenden):

Beim Senden läuft's andersherum: Body mit JSON.stringify serialisieren und den Content-Type-Header setzen.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Diese zwei Muster decken den Großteil dessen ab, was du in der Praxis mit JSON machst.

Weiter geht's: Optional Chaining

Geparstes JSON enthält oft optionale Felder — mal ist user.address.city da, mal nicht, und response.data.items kann genauso gut fehlen. Damit du tief verschachtelte Properties auslesen kannst, ohne dass dir das Skript um die Ohren fliegt, gibt es Optional Chaining (?.) — darum geht's auf der nächsten Seite.