JavaScript JSON

JavaScript Object Notation (JSON) ist das Rückgrat des Datenaustauschs im Web. Fast jede API, die Sie aufrufen, gibt JSON zurück, nahezu jede Konfigurationsdatei ist wahrscheinlich JSON, und wenn der Browser mit einem Server kommuniziert, ist JSON in der Regel das verwendete Format. Dieser Leitfaden behandelt alles, was Sie für den sicheren Umgang mit JSON in JavaScript benötigen: die Syntax, die zwei Kernmethoden (JSON.parse und JSON.stringify), das Formatieren und Filtern von Ausgaben, den Umgang mit Datumsangaben und tiefen Kopien sowie die Fallstricke, über die man im Produktivbetrieb stolpert.

Was JSON ist und warum es wichtig ist

JSON ist ein leichtgewichtiges, textbasiertes Datenformat, das für Menschen einfach zu lesen und zu schreiben sowie für Maschinen einfach zu parsen und zu erzeugen ist. Es ist sprachunabhängig — obwohl seine Syntax aus JavaScript entlehnt ist (Standard ECMA-262), können nahezu alle Sprachen (Python, Java, C#, Go, Rust, PHP) JSON lesen und schreiben. Diese Universalität ist der Grund, weshalb es zum Standardformat für REST APIs, Konfigurationsdateien (package.json, tsconfig.json) und localStorage wurde.

Das Wichtigste zu verstehen: JSON ist ein string, kein object. Ein JSON-string wird erst zu einem nutzbaren JavaScript-object, nachdem er geparst wurde, und ein JavaScript-object wird erst nach dem Serialisieren zu JSON. Die meiste Arbeit mit JSON besteht darin, zwischen diesen beiden Zuständen zu wechseln.

Grundlegende JSON-Syntax

Die JSON-Syntax ist eine strikte Teilmenge der JavaScript-Objekt-Literalsyntax:

• Daten werden als "key": value-Paare geschrieben
• Paare werden durch Kommas getrennt
• Geschweifte Klammern {} umschließen Objekte, eckige Klammern [] umschließen Arrays
• Schlüssel müssen in doppelte Anführungszeichen gesetzte strings sein (einfache Anführungszeichen und Schlüssel ohne Anführungszeichen sind ungültig)
• Werte dürfen ein string, eine Zahl, ein boolean, null, ein object oder ein array sein — aber nicht undefined, eine Funktion oder ein Date

{
  "name": "John",
  "age": 30,
  "isDeveloper": true,
  "languages": ["JavaScript", "Python", "Rust"]
}

JSON parsen mit JSON.parse()

JSON.parse() wandelt einen JSON-string in ein JavaScript-object (oder ein array, eine Zahl usw.) um, das Sie lesen und bearbeiten können. Im echten Code — insbesondere wenn das JSON von einer Netzwerkanfrage oder einer Benutzereingabe stammt — sollten Sie es immer in einen try...catch-Block einschließen, da fehlerhaftes JSON einen SyntaxError auslöst.

Zugriff auf verschachtelte Daten

Geparste JSON-Daten verhalten sich wie jedes andere object, daher erreichen Sie verschachtelte Werte mit Punkt- oder Klammernotation. Dies ist die häufigste Aufgabe bei einer API-Antwort.

Werte transformieren mit einem Reviver

JSON.parse() akzeptiert eine optionale reviver-Funktion als zweites Argument. Sie wird für jedes Schlüssel/Wert-Paar aufgerufen, und was immer sie zurückgibt, wird zum endgültigen Wert — praktisch, um Typen beim Parsen zu konvertieren. Ein klassischer Anwendungsfall ist die Wiederherstellung von Date-Objekten (JSON hat keinen Datumstyp, daher kommen Datumsangaben als strings an).

Objekte serialisieren mit JSON.stringify()

JSON.stringify() macht das Gegenteil: Es konvertiert einen JavaScript-Wert in einen JSON-string, der dann über das Netzwerk gesendet oder im Speicher gespeichert werden kann.

Übersichtliche Ausgabe mit Einrückung

Das dritte Argument steuert die Einrückung. Übergeben Sie eine Zahl (Leerzeichen) oder einen string, um lesbares, eingerücktes JSON zu erzeugen — nützlich für Logs, Konfigurationsdateien und beim Debuggen.

Eigenschaften filtern mit einem Replacer

Das zweite Argument ist ein replacer. Als array von Schlüsseln legt es fest, welche Eigenschaften behalten werden — eine schnelle Möglichkeit, sensible Felder wie Passwörter vor dem Senden von Daten zu entfernen.

Als Funktion wird der Replacer für jeden Schlüssel aufgerufen und ermöglicht es Ihnen, Werte zu transformieren oder wegzulassen. Die Rückgabe von undefined lässt diese Eigenschaft aus.

Benutzerdefinierte Serialisierung mit toJSON

Sie können steuern, wie ein bestimmtes object serialisiert wird, indem Sie ihm eine toJSON()-Methode geben. Wenn JSON.stringify() auf ein object mit dieser Methode trifft, ruft es toJSON() auf und serialisiert das, was es zurückgibt. (Genau so erzeugen Date-Objekte ISO-strings — sie haben ein eingebautes toJSON.)

Was stringify stillschweigend weglässt

JSON.stringify() ist absichtlich verlustbehaftet. Zu wissen, was übersprungen wird, verhindert verwirrende Fehler:

• undefined, Funktionen und Symbol-Werte werden aus Objekten weggelassen (und werden innerhalb von arrays zu null).
• Date-Objekte werden zu ISO-strings (über ihr toJSON).
• NaN und Infinity werden zu null.
• BigInt löst einen TypeError aus.
• Zirkuläre Referenzen lösen einen TypeError aus.

Fortgeschrittene Techniken und gängige Muster

Über die zwei Kernmethoden hinaus umfasst die tägliche JSON-Arbeit tiefe Kopien, den Umgang mit Datumsangaben und die Verarbeitung von arrays aus Datensätzen.

Objekte tief kopieren

Der Trick JSON.parse(JSON.stringify(obj)) erstellt eine tiefe Kopie — einen Klon, dessen verschachtelte Objekte vollständig unabhängig vom Original sind, sodass eine Mutation des einen niemals das andere beeinflusst.

Das ist schnell und ohne Abhängigkeiten, erbt aber alle Einschränkungen von stringify: Es lässt Funktionen, undefined und Symbols fallen, wandelt Dates in strings um und schlägt bei zirkulären Referenzen fehl. Für eine originalgetreue Kopie verwenden Sie lieber das eingebaute structuredClone(), das Datumsangaben, Maps, Sets und Zyklen verarbeitet.

Arbeiten mit Datumsangaben

JSON hat keinen Datumstyp, daher werden Datumsangaben als ISO 8601-strings übertragen. JSON.stringify schreibt sie automatisch, aber beim Parsen erhalten Sie einen einfachen string zurück — Sie müssen das Date selbst neu erstellen, entweder mit new Date(...) oder einem Reviver (wie zuvor gezeigt).

Arrays von Datensätzen verarbeiten

API-Antworten sind in der Regel arrays von Objekten. Nach dem Parsen erledigen die Standard-array-Methoden (forEach, map, filter) den Rest.

JSON und der Browser: fetch und localStorage

Zwei alltägliche Orte, an denen JSON auftaucht:

• fetch: response.json() liest den Body und parst ihn für Sie, daher rufen Sie JSON.parse bei einem fetch-Ergebnis selten direkt auf — const data = await response.json();. Weitere Informationen finden Sie im Fetch API-Leitfaden.
• localStorage: Es speichert nur strings, also serialisieren Sie beim Speichern und parsen beim Lesen: localStorage.setItem('user', JSON.stringify(user)) und dann JSON.parse(localStorage.getItem('user')).

Fazit

JSON ist das Format, mit dem Sie als JavaScript-Entwickler am häufigsten zu tun haben, und es läuft auf zwei Methoden hinaus: JSON.parse(), um einen string in einen nutzbaren Wert umzuwandeln, und JSON.stringify(), um einen Wert wieder in einen string zu konvertieren. Ergänzen Sie diese durch die Reviver- und Replacer-Argumente zur Typkonvertierung und Filterung, Einrückung für lesbare Ausgaben und toJSON für benutzerdefinierte Serialisierung, und Sie können nahezu jede Datenaustauschaufgabe bewältigen.

Behalten Sie die verlustbehafteten Randfälle im Hinterkopf — weggelassene undefined/Funktionen, zu strings konvertierte Datumsangaben und Fehler bei zirkulären Referenzen — und greifen Sie auf structuredClone() zurück, wenn Sie eine echte Kopie statt eines JSON-Hin-und-Rücktransfers benötigen. Mit diesen Werkzeugen können Sie Daten sicher zwischen Ihrer App, dem Server und dem Browser-Speicher bewegen.

Übungen