JSON

Zwei Programme müssen sich Daten schicken. Deins läuft im Browser, das andere auf einem Server, vielleicht in einer ganz anderen Sprache. Über die Leitung geht dabei nur eines: Text.

JSON ist die Vereinbarung, wie dieser Text aussieht. Der Name steht für JavaScript Object Notation, und die Schreibweise ist tatsächlich von JavaScript-Objekten abgeschaut. Benutzt wird sie inzwischen überall, von Python bis Java.

01 / 05Zwei Funktionen, mehr ist es nicht

<p>Ein Text wird zum Objekt und wieder zum Text.</p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

// Das hier ist ein String. Nichts weiter.
const text = '{"titel":"JavaScript","stunden":47,"frei":true}';

console.log("Typ vorher:", typeof text);
console.log("Länge des Textes:", text.length);

// parse macht daraus ein echtes Objekt.
const kurs = JSON.parse(text);

console.log("Typ danach:", typeof kurs);
console.log("Titel:", kurs.titel);
console.log("Stunden mal zwei:", kurs.stunden * 2);

// Und stringify macht daraus wieder Text.
console.log("Zurück:", JSON.stringify(kurs));

// Mit dem dritten Argument wird es lesbar. Das ist die Einrückung.
console.log(JSON.stringify(kurs, null, 2));

JSON.parse nimmt Text und gibt dir ein Objekt. JSON.stringify nimmt ein Objekt und gibt dir Text. Das ist der ganze Umfang.

Im ersten Beispiel siehst du beide Richtungen. Achte auf die typeof-Ausgaben: vorher string, danach object. Und auf text.length: Ein Text hat eine Länge, weil er ein Text ist. Erst nach JSON.parse kannst du mit kurs.stunden rechnen.

Das dritte Argument von stringify ist die Einrückung. JSON.stringify(kurs, null, 2) bricht die Ausgabe um und rückt sie zwei Leerzeichen ein. Beim Debuggen ist das der Unterschied zwischen lesbar und unlesbar.

02 / 05Die Regeln sind strenger, als sie aussehen

Ein JSON-Text sieht aus wie ein Stück JavaScript, ist aber deutlich enger gefasst:

Schlüssel stehen immer in doppelten Anführungszeichen. {"a": 1} ist gültig, {a: 1} nicht.

Texte stehen ebenfalls in doppelten Anführungszeichen. Einfache Anführungszeichen gibt es in JSON nicht.

Nach dem letzten Eintrag steht kein Komma. In JavaScript darfst du eines stehen lassen, in JSON nicht.

Kommentare gibt es nicht. Weder mit // noch mit den Sternchen.

undefined gibt es nicht. null schon.

Erlaubt sind genau sechs Sorten von Werten: Text, Zahl, Wahrheitswert, null, Array und Objekt. Sonst nichts.

Diese Liste musst du nicht glauben, du kannst sie durchprobieren. In der Eingabezeile der Console tippst du einen Aufruf hin und siehst die Antwort sofort:

JSON.parse('{a: 1}') beschwert sich mit Expected property name or '}' in JSON at position 1. Der Schlüssel ohne Anführungszeichen ist gemeint.

JSON.parse('{"a": 1,}') sagt Expected double-quoted property name in JSON at position 8. Nach dem Komma hat es einen weiteren Schlüssel erwartet und die schließende Klammer gefunden.

JSON.parse('') sagt Unexpected end of JSON input. Eine leere Zeichenkette ist kein gültiges JSON, und das ist der Fall, der dich später wirklich trifft: Ein Server, der nichts zurückgibt, sieht so aus.

Geh die Regeln von oben einmal durch und such dir für jede den passenden Fehler. Das dauert zwei Minuten und ersetzt das Auswendiglernen.

03 / 05parse wirft, und zwar sofort

<p>Drei Texte, zwei davon sind kein gültiges JSON.</p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

const proben = [
  '{"a":1}',
  "{a:1}",
  '{"a":1,}',
];

for (const probe of proben) {
  try {
    const wert = JSON.parse(probe);
    console.log("Gelesen:", JSON.stringify(wert));
  } catch (fehler) {
    console.warn("Kaputt:", probe, "->", fehler.message);
  }
}

// Ohne try/catch bricht die ganze Datei ab. Alles darunter läuft nicht mehr.
try {
  JSON.parse("");
} catch (fehler) {
  console.error("Auch ein leerer Text ist kein JSON:", fehler.message);
}

Weil die Regeln so eng sind, ist JSON.parse einer der Orte, an denen ein try/catch wirklich hingehört. Du erinnerst dich an Lektion 14.2: Ein try/catch um alles ist Aberglaube, ein try/catch um eine Stelle, die nachweislich wirft, ist Handwerk.

Und JSON.parse wirft nachweislich. Bei einem Schlüssel ohne Anführungszeichen, bei einem Komma zu viel, bei einer leeren Zeichenkette. Im zweiten Beispiel siehst du alle drei Meldungen.

Der Grund, warum du dich darauf einstellen musst: Der Text kommt meistens von woanders. Aus dem Netz, aus dem Browserspeicher, aus einer Datei. Du hast ihn nicht geschrieben, und du kannst dich nicht darauf verlassen, dass er in Ordnung ist.

04 / 05Was auf dem Weg verlorengeht

<p>Fünf Eigenschaften rein, drei kommen zurück.</p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

const eintrag = {
  titel: "JavaScript",
  stunden: 47,
  leer: undefined,
  zeigen: function () {
    return "hallo";
  },
  angelegt: new Date(2026, 0, 15),
};

const text = JSON.stringify(eintrag);
console.log("Als Text:", text);

const zurueck = JSON.parse(text);
console.log("Schlüssel vorher:", Object.keys(eintrag));
console.log("Schlüssel danach:", Object.keys(zurueck));

// Das Datum ist da, aber es ist kein Datum mehr.
console.log("Typ von angelegt:", typeof zurueck.angelegt);
console.log("Wert:", zurueck.angelegt);

Hier wird es unangenehm, denn stringify beschwert sich nicht. Es lässt einfach weg, was es nicht darstellen kann:

Eigenschaften mit dem Wert undefined verschwinden. Nicht als null, sondern ganz.

Funktionen verschwinden ebenfalls. Ein Objekt mit Methoden verliert beim Weg durch JSON sein Verhalten und behält nur seine Daten.

Ein Date wird zu Text. Es verschwindet also nicht, aber es kommt als Zeichenkette zurück, nicht als Datum. Wer danach .getFullYear() aufruft, bekommt einen TypeError. Wenn du das Datum wieder als Datum brauchst, musst du es beim Lesen selbst zurückverwandeln.

Im dritten Beispiel gehen fünf Eigenschaften hinein und drei kommen zurück. Vergleich die beiden Object.keys-Ausgaben nebeneinander.

05 / 05Der Satz, den du dir merkst

JSON kann Daten, kein Verhalten. Alles, was ein Objekt ausmacht und nicht in einer Textdatei stehen kann, überlebt den Weg nicht.

Das ist keine Schwäche des Formats, sondern sein Zweck. Ein Programm in einer anderen Sprache könnte mit deiner JavaScript-Funktion ohnehin nichts anfangen.