JSON und Datenformate

JSON ist das Format, in dem Server und Browser Daten austauschen. Auch was eine App im Browser speichert, etwa die Favoriten, liegt meist als JSON-Text vor. JSON sieht aus wie JavaScript, kennt aber weniger Typen, und genau dort entstehen die typischen Fehler.

Lernziele

Nach dieser Einheit kannst du

• Daten mit JSON.stringify in Text verwandeln und mit JSON.parse zurückholen,
• sagen, welche Werte JSON nicht kennt und was mit ihnen passiert,
• Datumswerte durch JSON hindurch erhalten,
• Objekte mit structuredClone samt allen inneren Objekten kopieren.

Daten in Text verwandeln und zurück

JSON.stringify verwandelt einen Wert in Text, JSON.parse liest den Text wieder ein. Der Text folgt strengen Regeln. Schlüssel und Strings stehen in doppelten Anführungszeichen, und es gibt nur Objekte, Arrays, Strings, Zahlen, true, false und null.

stringify.mjs

const item = {
  id: 2,
  name: 'Zelt',
  deposit: 50,
  lentUntil: new Date('2026-11-12T00:00:00Z'),
  note: undefined,
}

const text = JSON.stringify(item)
console.log(text)

const back = JSON.parse(text)
console.log(typeof back.lentUntil, back.note)

console.log(JSON.stringify({ tags: ['Küche', 'raclette'] }, null, 2))

Die erste Zeile zeigt, was JSON aus einem Objekt mit einem Datum macht. Das Datum wird zu einem Text im Format ISO 8601, und das Feld note fehlt ganz, weil JSON undefined nicht kennt. Nach JSON.parse ist lentUntil deshalb ein String und kein Date mehr. Mit dem dritten Argument, hier 2, rückt JSON.stringify den Text zum Lesen ein.

Wert in JavaScript	Was in JSON daraus wird
undefined und Funktionen in einem Objekt	das Feld fehlt
undefined und Funktionen in einem Array	null
Date	ein Text wie "2026-11-12T00:00:00.000Z"
NaN und Infinity	null
Map und Set	ein leeres Objekt {}

Kopien

Weil JSON.parse immer neue Objekte erzeugt, kopieren manche Programme Daten mit JSON.parse(JSON.stringify(original)). Das kopiert auch verschachtelte Objekte, verliert aber alles, was JSON nicht kennt. Seit 2022 gibt es in allen grossen Browsern structuredClone, das auch Datumswerte, Map und Set richtig kopiert.

copy.mjs

const original = { name: 'Zelt', from: new Date('2026-11-02T00:00:00Z'), parts: ['Heringe'] }

const viaJson = JSON.parse(JSON.stringify(original))
const viaClone = structuredClone(original)

viaClone.parts.push('Plane')
console.log(original.parts.length, viaClone.parts.length)
console.log(viaJson.from instanceof Date, viaClone.from instanceof Date)

try {
  JSON.parse("{ 'name': 'Zelt' }")
} catch (error) {
  console.log(error.name)
}

Die Kopie mit structuredClone hat ein eigenes Array parts, darum ändert push das Original nicht. Das Datum bleibt bei structuredClone ein Date, bei der Kopie über JSON wird es zu Text. Die letzte Zeile zeigt einen Fehler, dem du oft begegnen wirst. JSON verlangt doppelte Anführungszeichen, und bei einfachen wirft JSON.parse einen SyntaxError.

structuredClone kann keine Funktionen kopieren und wirft in diesem Fall einen Fehler. Für Daten, die von einem Server kommen, spielt das keine Rolle, denn sie enthalten keine Funktionen.

Typische Fehler

Fehler	Was hilft
Nach JSON.parse ist ein Datum ein String, und date.getDay() wirft einen TypeError.	Den Text nach dem Lesen mit new Date(...) wieder in ein Datum verwandeln.
JSON wird von Hand mit einfachen Anführungszeichen oder einem Komma am Schluss geschrieben.	JSON mit JSON.stringify erzeugen, nicht von Hand.
Ein Set wird gespeichert und kommt als {} zurück.	Vor dem Speichern in ein Array verwandeln, [...set].
JSON.parse steht ohne try, und ein kaputter Eintrag im Speicher legt die App lahm.	Gelesene Daten in try und catch einpacken, wie in der Einheit Fehler behandeln.
Ein KI-Assistent kopiert Daten mit JSON.parse(JSON.stringify(...)).	structuredClone verwenden, das auch Datumswerte erhält.

Aufgaben

Aufgabe Einstieg

Lies den JSON-Text '{"id": 6, "name": "Beamer", "deposit": 80, "available": false}' mit JSON.parse. Gib den Namen aus, das halbe Pfand und «frei» oder «ausgeliehen», je nachdem, was in available steht.

Lösung

solution-1.mjs

const text = '{"id": 6, "name": "Beamer", "deposit": 80, "available": false}'

const item = JSON.parse(text)
console.log(item.name, item.deposit / 2, item.available ? 'frei' : 'ausgeliehen')

Die Ausgabe ist Beamer 40 ausgeliehen. Nach JSON.parse ist deposit eine Zahl und available ein Wahrheitswert, damit lässt sich direkt rechnen und entscheiden.

Aufgabe Vertiefung

Verwandle die Reservation { item: 'Zelt', from: new Date('2026-11-02T00:00:00Z') } in JSON und wieder zurück. Sorge dafür, dass from danach wieder ein Date ist, und gib den Tag des Monats aus.

Lösung

solution-2.mjs

const reservation = { item: 'Zelt', from: new Date('2026-11-02T00:00:00Z') }

const text = JSON.stringify(reservation)
const back = JSON.parse(text)
back.from = new Date(back.from)

console.log(text)
console.log(back.from.getUTCDate(), back.from instanceof Date)

Der JSON-Text enthält das Datum als Text im Format ISO 8601. new Date(back.from) liest diesen Text wieder als Datum. getUTCDate liefert den Tag in UTC, so kommt überall auf der Welt die 2 heraus.

Aufgabe Knobelei

Die Favoriten eines Mitglieds liegen in einem Set, { pageSize: 20, favorites: new Set([3, 7]) }. Was macht JSON.stringify aus diesen Einstellungen? Speichere sie so, dass die Nummern der Favoriten erhalten bleiben.

Lösung

solution-3.mjs

const settings = { pageSize: 20, favorites: new Set([3, 7]) }

console.log(JSON.stringify(settings))
console.log(JSON.stringify({ ...settings, favorites: [...settings.favorites] }))

Ein Set hat keine Felder, die JSON sehen könnte, darum wird es zu {}, und die Favoriten sind weg. Mit [...settings.favorites] wird das Set vor dem Speichern zu einem Array. Beim Lesen machst du mit new Set(array) wieder ein Set daraus.