Arbeit mit JSON in JavaScript: Parsing und Serialisierung für Anfänger

Einleitung: Was ist JSON und warum wird es in JavaScript benötigt?

JSON (JavaScript Object Notation) ist ein leichtes, textbasiertes Datenaustauschformat, das auf der Objektsyntax von JavaScript basiert. Trotz seines Namens ist JSON sprachunabhängig und wird von praktisch allen modernen Programmiersprachen unterstützt. Im Node.js-Ökosystem und im browserbasierten JavaScript gehört die Arbeit mit JSON zu den häufigsten Operationen: vom Abrufen von Daten über APIs bis zum Speichern von Konfigurationen und der Übertragung von Informationen zwischen Server und Client.

In diesem Artikel behandeln wir zwei Schlüsselmethoden: JSON.parse() (Umwandlung eines JSON-Strings in ein JavaScript-Objekt) und JSON.stringify() (Umwandlung eines JavaScript-Objekts in einen JSON-String). Sie lernen, wie Sie Fehler richtig behandeln, mit verschachtelten Strukturen arbeiten und erweiterte Funktionen dieser Methoden nutzen.

1. JSON-Parsing: Die Methode JSON.parse()

Die Methode JSON.parse() nimmt einen String im JSON-Format entgegen und wandelt ihn in ein JavaScript-Objekt, -Array oder einen primitiven Wert um. Dies ist die grundlegende Operation, wenn Sie Daten aus einer externen Quelle erhalten – zum Beispiel von einer REST-API oder aus einer Datei.

Grundlegende Syntax

const jsonString = '{"name": "Anna", "age": 30, "isStudent": false}';const user = JSON.parse(jsonString);

console.log(user.name);      // "Anna"console.log(user.age);       // 30console.log(user.isStudent); // false

Beachten Sie: Schlüssel und Zeichenfolgenwerte in JSON müssen in doppelte Anführungszeichen gesetzt werden. Einfache Anführungszeichen oder fehlende Anführungszeichen bei Schlüsseln führen zu einem Fehler.

Parsing von Arrays

JSON kann nicht nur Objekte, sondern auch Arrays enthalten:

const jsonArray = '[1, 2, 3, "vier", true]';const arr = JSON.parse(jsonArray);

console.log(arr[0]); // 1console.log(arr[3]); // "vier"

Verschachtelte Strukturen

JSON unterstützt unbegrenzte Verschachtelung:

const complexJson = '{"users":[{"id":1,"name":"Ivan"},{"id":2,"name":"Maria"}]}';const data = JSON.parse(complexJson);

console.log(data.users[0].name); // "Ivan"console.log(data.users[1].id);   // 2

Fehlerbehandlung beim Parsing

Wenn der String ungültiges JSON enthält, löst JSON.parse() eine SyntaxError-Ausnahme aus. Verwenden Sie bei der Arbeit mit externen Daten immer try/catch:

const invalidJson = '{"name": "Peter", age: 25}'; // Fehler: age ohne Anführungszeichen

try {    const obj = JSON.parse(invalidJson);    console.log(obj);} catch (error) {    console.error('JSON-Parsing-Fehler:', error.message);    // Ausgabe: JSON-Parsing-Fehler: Unexpected token 'a', ...}

Erweiterte Verwendung: Reviver-Funktion

Der zweite Parameter von JSON.parse() ist eine reviver-Funktion, mit der Sie Werte während des Parsings umwandeln können. Beispielsweise können Sie Datumsstrings automatisch in Date-Objekte umwandeln:

const jsonWithDate = '{"name": "Ereignis", "date": "2025-03-15T10:00:00.000Z"}';

const event = JSON.parse(jsonWithDate, (key, value) => {    if (key === 'date') {        return new Date(value);    }    return value;});

console.log(event.date instanceof Date); // trueconsole.log(event.date.getFullYear());   // 2025

2. JSON-Serialisierung: Die Methode JSON.stringify()

Die Methode JSON.stringify() führt die umgekehrte Operation aus – sie wandelt ein JavaScript-Objekt oder einen Wert in einen JSON-String um. Dies ist erforderlich, um Daten an einen Server zu senden, in einer Datei zu speichern oder zu protokollieren.

Grundlegende Syntax

const user = {    name: "Olga",    age: 28,    isAdmin: true,    skills: ["JS", "Python", "SQL"]};

const jsonString = JSON.stringify(user);console.log(jsonString);// {"name":"Olga