JSON in JavaScript parsen

JSON in JavaScript zu parsen ist etwas, das du als Web-Entwickler hunderte Male machen wirst. Glücklicherweise hat JavaScript dafür eingebauten Support — keine Libraries nötig. Aber es gibt mehr Nuancen bei JSON.parse() und JSON.stringify() als die Docs vermuten lassen. Lass uns das ordentlich durchgehen.

JSON.parse() — Einen String in ein Objekt umwandeln

JSON.parse() nimmt einen JSON-formatierten String und wandelt ihn in einen JavaScript-Wert um. Das ist normalerweise ein Objekt oder Array, kann aber auch ein String, eine Zahl, ein Boolean oder null sein:

const jsonString = '{"name": "Alice", "age": 30, "active": true}';
const user = JSON.parse(jsonString);

console.log(user.name);    // "Alice"
console.log(user.age);     // 30
console.log(user.active);  // true
console.log(typeof user);  // "object"

Beachte, dass die Eingabe ein String sein muss. Ein häufiger Fehler ist der Versuch, einen Wert zu parsen, der bereits ein Objekt ist — JSON.parse({}) wirft einen SyntaxError, weil es das Objekt zuerst zu "[object Object]" konvertiert, was kein gültiges JSON ist.

Wrapp JSON.parse() immer in ein try/catch

Hier ist das, was dir niemand sagt: JSON.parse() wirft einen SyntaxError, wenn die Eingabe kein gültiges JSON ist. Wenn du Daten von einer API, User-Eingaben oder einer Datei parst, solltest du diesen Fehler immer behandeln. Eine einzige fehlerhafte Antwort kann deine App zum Absturz bringen, wenn du das nicht tust:

function safeParseJSON(str) {
  try {
    return { data: JSON.parse(str), error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}

const { data, error } = safeParseJSON('{"name": "Alice"}');
if (error) {
  console.error('Invalid JSON:', error);
} else {
  console.log(data.name); // "Alice"
}

// Handles bad input gracefully
const result = safeParseJSON('not json at all');
console.log(result.error); // "Unexpected token 'o', "not json "... is not valid JSON"

Ich verwende einen solchen Wrapper in fast jedem Projekt. Er macht die Fehlerbehandlung konsistent und verhindert hässliche unabgefangene Exceptions, die bis zu deiner UI hochsprudeln.

JSON.stringify() — Ein Objekt in einen String umwandeln

JSON.stringify() macht das Gegenteil: Es wandelt einen JavaScript-Wert in einen JSON-String um. Du verwendest das beim Senden von Daten an eine API, beim Speichern im localStorage oder beim Schreiben in eine Datei:

const user = {
  name: "Bob",
  age: 25,
  roles: ["admin", "editor"],
  password: "secret123" // we'll handle this later
};

// Basic usage
const jsonString = JSON.stringify(user);
// '{"name":"Bob","age":25,"roles":["admin","editor"],"password":"secret123"}'

// Pretty-printed (great for logs and file output)
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);
// {
//   "name": "Bob",
//   "age": 25,
//   "roles": ["admin", "editor"],
//   "password": "secret123"
// }

Das dritte Argument von JSON.stringify() ist der Einrückungs-Level. 2 oder 4 ergibt lesbare Ausgabe. Der Standard (kein drittes Argument) gibt dir kompaktes, minifiziertes JSON — besser für Netzwerkübertragung.

Was stringify() still fallen lässt

Das trifft Entwickler regelmäßig. JSON.stringify() lässt bestimmte Werte stillschweigend fallen, weil JSON sie nicht unterstützt:

const data = {
  name: "Alice",
  greet: function() { return "hi"; },   // Functions → dropped
  undef: undefined,                      // undefined → dropped
  sym: Symbol("key"),                    // Symbols → dropped
  nan: NaN,                              // NaN → null
  inf: Infinity,                         // Infinity → null
  date: new Date("2024-01-15")           // Dates → ISO string
};

console.log(JSON.stringify(data, null, 2));
// {
//   "name": "Alice",
//   "nan": null,
//   "inf": null,
//   "date": "2024-01-15T00:00:00.000Z"
// }
// greet, undef, sym are GONE

JSON von einer API laden — das Muster aus der Praxis

In der Praxis passiert das meiste JSON-Parsing beim Laden von Daten von einer API. Die Fetch API macht das unkompliziert — response.json() übernimmt das Parsen für dich:

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const user = await response.json(); // parses JSON automatically
    return user;
  } catch (err) {
    console.error('Failed to fetch user:', err);
    return null;
  }
}

const user = await getUser(42);
if (user) {
  console.log(`Hello, ${user.name}!`);
}

response.json() ist im Wesentlichen JSON.parse(await response.text()). Es wirft auch, wenn der Response-Body kein gültiges JSON ist — also lohnt es sich, das in Production-Code separat abzufangen.

Mit verschachtelten JSON-Daten arbeiten

Tief verschachteltes JSON ist in echten APIs häufig. So navigierst du es sicher, ohne bei fehlenden Keys abzustürzen:

const apiResponse = {
  "user": {
    "profile": {
      "address": {
        "city": "Berlin"
      }
    }
  }
};

// Unsafe — throws if any level is undefined
const city1 = apiResponse.user.profile.address.city; // "Berlin"

// Safe with optional chaining (ES2020+) — returns undefined instead of throwing
const city2 = apiResponse?.user?.profile?.address?.city; // "Berlin"
const zip   = apiResponse?.user?.profile?.address?.zip;  // undefined (not a crash)

// With a fallback using nullish coalescing
const country = apiResponse?.user?.profile?.address?.country ?? "Unknown";

Optional Chaining (?.) und Nullish Coalescing (??) sind moderne JavaScript-Features — beide seit 2020 Teil der ECMAScript-Spec — die den Umgang mit unsicheren JSON-Strukturen deutlich sicherer machen. Verwende sie frei — sie werden in allen modernen Browsern und Node.js 14+ unterstützt.

Die replacer- und reviver-Funktionen

Sowohl JSON.stringify() als auch JSON.parse() akzeptieren ein zweites Argument, das dir erlaubt, die Transformation anzupassen. Diese sind für echte Szenarien genuinely nützlich:

// replacer: filter or transform values during stringify
const user = { name: "Alice", password: "s3cr3t", age: 30 };
const safe = JSON.stringify(user, ["name", "age"]); // only include these keys
// '{"name":"Alice","age":30}'  — password is excluded

// reviver: transform values during parse
const dateJson = '{"name": "Alice", "createdAt": "2024-01-15T09:30:00Z"}';
const parsed = JSON.parse(dateJson, (key, value) => {
  if (key === "createdAt") return new Date(value); // convert string to Date
  return value;
});
console.log(parsed.createdAt instanceof Date); // true
console.log(parsed.createdAt.getFullYear());   // 2024

Das Reviver-Muster ist besonders nützlich, um Date-Objekte nach einem JSON-Roundtrip wiederherzustellen, da JSON keinen nativen Datumstyp hat.

Nützliche Tools

Beim Arbeiten mit JSON in JavaScript-Projekten sparen diese Tools Zeit: JSON Formatter zum hübschen Ausgeben minifizierter API-Antworten, JSON Validator zum Prüfen auf Syntaxfehler, JSON Path zum Abfragen bestimmter Felder aus großen Payloads, und JSON Escape wenn du JSON in einem String einbetten musst. Für mehr Tiefe ist die MDN JSON-Referenz ausgezeichnet.

Zusammenfassung

JSON.parse() und JSON.stringify() sind die beiden Funktionen, die du brauchst. Die wichtigsten Gewohnheiten: Wrapp parse() immer in try/catch, verwende Optional Chaining für verschachtelten Zugriff, und wiss, was stringify() still fallen lässt. Mach diese drei Dinge richtig und du wirst 99% der JSON-Szenarien aus der Praxis ohne Überraschungen meistern.