// B5.4 · ca. 30 Min. · Einstieg

JSON: parse und stringify

Nach dieser Lektion wandeln Sie Daten in JSON-Text um und zurück, schreiben JSON, das sich parsen lässt, und prüfen Geladenes.

Lektion 4 von 5 in B5 Arrays, Objekte und JSON

Zurück Weiter

Danach können Sie

JSON-Text von Objekten unterscheiden und gültiges JSON schreiben: doppelte Anführungszeichen, kein Komma am Ende, keine Kommentare, kein undefined
JSON-Text parsen, seinen SyntaxError lesen und das Ergebnis mit typeof und Array.isArray prüfen
JSON mit JSON.stringify und Einrückung schreiben, wissen, was wegfällt, und einfache Daten per Hin- und Rückweg kopieren

Aufwärmen · Aufgabe 1 von 7
Zum Aufwärmen aus Lektion B5.3: Was gibt dieser Code aus?
```
const item = { name: "tea", price: 3 };
const copy = { ...item };
copy.price = 4;
console.log(item.price, copy.price);
```
3 34 34 43 4
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: text enthält JSON. Was gibt dieser Code aus?
```
const text = '{"name": "Ada", "age": 36}';
console.log(text.name, JSON.parse(text).name);
```
undefined Adaname AdaAda undefinedAda Ada
Üben · Aufgabe 3 von 7
Ergänzen Sie die Methode, die den JSON-Text in ein Objekt umwandelt, sodass die letzte Zeile 3 ausgibt.
```
const text = '{"count": 2}';
const data = JSON.____(text);
console.log(data.count + 1);
```
const data = JSON.Ihre Antwort(text);
Üben · Aufgabe 4 von 7
Ordnen Sie jedem Aufruf zu, was er liefert.
JSON.parse('{"a": 1}') — Zuordnung für „JSON.parse('{"a": 1}')“
JSON.parse('[1, 2]') — Zuordnung für „JSON.parse('[1, 2]')“
JSON.parse('"hi"') — Zuordnung für „JSON.parse('"hi"')“
JSON.parse("{'a': 1}") — Zuordnung für „JSON.parse("{'a': 1}")“
Üben · Aufgabe 5 von 7
Was gibt dieser Code aus?
```
console.log(JSON.stringify({ a: 1, b: undefined, c: [1, undefined] }));
```
{"a":1,"b":undefined,"c":[1]}{"a":1,"b":null,"c":[1,null]}{"a":1,"c":[1,null]}{"a":1,"c":[1]}
Denksport · Aufgabe 6 von 7
Knobelaufgabe. Die Bestellung wird gespeichert und wieder geladen. Was gibt die letzte Zeile aus?
```
const order = { total: NaN, when: new Date(0) };
const copy = JSON.parse(JSON.stringify(order));
console.log(copy.total, typeof copy.when);
```
null objectNaN stringnull stringNaN object
Anwenden · Aufgabe 7 von 7
Mini-Aufgabe: Einstellungen speichern und laden. Legen Sie ein Objekt settings mit einem Theme, einer Schriftgröße und einem Array von Favoriten an. Wandeln Sie es in JSON-Text um, mit zwei Leerzeichen eingerückt, und geben Sie ihn aus. Parsen Sie den Text zurück und prüfen Sie mit typeof und Array.isArray, dass Sie ein Objekt und ein Array von Favoriten erhalten haben. Versuchen Sie dann, Einstellungen mit einem Komma am Ende in try { … } catch (error) { … } zu parsen, und geben Sie den Namen des Fehlers aus.
Prüfen Sie Ihr Ergebnis anhand dieser Liste
- Verwendet JSON.stringify mit dem Einrückungsargument 2
- Parst den Text mit JSON.parse zurück und liest daraus eine Zahl als Zahl
- Prüft das Ergebnis mit typeof und Array.isArray
- Schreibt absichtlich fehlerhaftes JSON und fängt den SyntaxError ab

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Eine Leseliste als JSON

Eine Leseliste wird in JSON-Text umgewandelt und zurück. Der Text ist ein einziger String ohne Leerzeichen; mit Einrückung verteilt er sich auf mehrere Zeilen. Parsen liefert wieder echte Objekte, Hin und Rückweg eine unabhängige Kopie, und ein Objekt mit NaN, undefined, einem Date und einer Methode zeigt, was JSON nicht speichern kann. Der letzte Teil, eine Vorschau auf Modul I4, fängt den SyntaxError von JSON mit einfachen Anführungszeichen ab.

main.js

// A reading list saved as JSON text and loaded back.
const list = [
  { title: "Dune", pages: 412, read: true },
  { title: "Emma", pages: 474, read: false }
];

const text = JSON.stringify(list);
console.log(text);
console.log(typeof text, Array.isArray(list));

console.log(JSON.stringify(list[0], null, 2));

const loaded = JSON.parse(text);
console.log(loaded[1].title, Array.isArray(loaded), typeof loaded[0]);

const copy = JSON.parse(JSON.stringify(list));
copy[0].read = false;
console.log(list[0].read, copy[0].read);

const odd = { score: NaN, note: undefined, when: new Date(0), show() {} };
console.log(JSON.stringify(odd));

try {
  JSON.parse("{'title': 'Dune'}");
} catch (error) {
  console.log(error.name + ": " + error.message);
}

Ausführen mit

node main.js

Ausgabe

[{"title":"Dune","pages":412,"read":true},{"title":"Emma","pages":474,"read":false}]
string true
{
  "title": "Dune",
  "pages": 412,
  "read": true
}
Emma true object
true false
{"score":null,"when":"1970-01-01T00:00:00.000Z"}
SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)

JSON.stringify setzt doppelte Anführungszeichen um jeden Schlüssel und String und lässt alle Leerzeichen weg.
Mit null, 2 bekommt jede Ebene eigene Zeilen, um zwei Leerzeichen eingerückt.
Die Kopie aus Hin und Rückweg ändert sich allein: list[0].read bleibt true.
NaN wurde null, das Date ein String, und note und show sind verschwunden.
Der SyntaxError nennt die Position des ersten Zeichens, das die Regeln bricht: das einfache Anführungszeichen an Position 1.

Ändern und ausführen

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Daten laden und ihre Form prüfen

parseScores(text) soll JSON-Text parsen und das enthaltene Array zurückgeben. Enthält der Text etwas anderes, etwa ein Objekt oder eine Zahl, soll die Funktion ein leeres Array zurückgeben, []. isRecord(value) soll nur für ein einfaches Objekt true liefern: nicht für null, nicht für ein Array, nicht für eine Zahl. Der Starter vertraut dem Text, und sein isRecord sagt ja zu null und zu Arrays. Korrigieren Sie beides mit Array.isArray, typeof und einer Prüfung auf null.

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise

Hinweis 1
Führen Sie die Tests aus: parseScores gibt das geparste Objekt zurück, und isRecord(null) ist true, weil typeof null "object" ist.
Hinweis 2
Speichern Sie den geparsten Wert in einer Konstanten und geben Sie dann Array.isArray(data) ? data : [] zurück.
Hinweis 3
Ergänzen Sie isRecord um zwei Prüfungen mit &&: value !== null und !Array.isArray(value).

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// The array in the JSON text, or [] when the text holds something else.
export function parseScores(text) {
  const data = JSON.parse(text);
  return Array.isArray(data) ? data : [];
}

// true only for a plain object: not null, not an array.
export function isRecord(value) {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// The array in the JSON text, or [] when the text holds something else.
export function parseScores(text) {
  return JSON.parse(text);
}

// true only for a plain object: not null, not an array.
export function isRecord(value) {
  return typeof value === "object";
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {parseScores, isRecord} from './main.js';

test('parseScores gibt das Array aus dem Text zurück', () => {
  const got = parseScores('[3, 5, 8]');
  assert.deepEqual(got, [3, 5, 8], `parseScores('[3, 5, 8]') gab ${JSON.stringify(got)} zurück, erwartet war [3,5,8]`);
});

test('parseScores gibt [] für ein Objekt zurück', () => {
  const got = parseScores('{"scores": [3, 5]}');
  assert.deepEqual(got, [], `parseScores für ein Objekt gab ${JSON.stringify(got)} zurück, erwartet war []`);
});

test('parseScores gibt [] für eine Zahl zurück', () => {
  const got = parseScores('7');
  assert.deepEqual(got, [], `parseScores('7') gab ${JSON.stringify(got)} zurück, erwartet war []`);
});

test('isRecord ist true für ein Objekt', () => {
  assert.equal(isRecord(JSON.parse('{"a": 1}')), true, 'isRecord für ein Objekt sollte true sein');
});

test('isRecord ist false für null und für ein Array', () => {
  assert.equal(isRecord(JSON.parse('null')), false, 'isRecord(null) sollte false sein');
  assert.equal(isRecord(JSON.parse('[1]')), false, 'isRecord für ein Array sollte false sein');
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test

learnrun.js herunterladen

Übung 2 von 2

Daten speichern und tief kopieren

toJson(data) soll den JSON-Text von data zurückgeben, um zwei Leerzeichen eingerückt, bereit zum Speichern in einer Datei. copyData(data) soll eine Kopie zurückgeben, die sich ändern lässt, verschachtelte Arrays eingeschlossen, ohne data zu ändern. Die Daten sind einfach: Objekte, Arrays, Strings, Zahlen und Booleans. Der Starter schreibt alles in eine Zeile, und seine Spread-Kopie teilt sich die verschachtelten Arrays. Korrigieren Sie beides mit JSON.stringify und JSON.parse.

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise

Hinweis 1
Führen Sie die Tests aus: toJson liefert eine lange Zeile, und ein push auf die items der Kopie ändert auch das Original.
Hinweis 2
JSON.stringify nimmt die Einrückung als drittes Argument; das zweite ist null.
Hinweis 3
Wandeln Sie data in Text um und parsen Sie ihn zurück: JSON.parse(JSON.stringify(data)) baut jedes verschachtelte Array neu.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// The JSON text of data, indented by two spaces.
export function toJson(data) {
  return JSON.stringify(data, null, 2);
}

// A copy whose nested arrays and objects are its own.
export function copyData(data) {
  return JSON.parse(JSON.stringify(data));
}

Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// The JSON text of data, indented by two spaces.
export function toJson(data) {
  return JSON.stringify(data);
}

// A copy whose nested arrays and objects are its own.
export function copyData(data) {
  return { ...data };
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {toJson, copyData} from './main.js';

test('toJson rückt um zwei Leerzeichen ein', () => {
  const got = toJson({ name: 'Ada', tags: ['x'] });
  const expected = '{\n  "name": "Ada",\n  "tags": [\n    "x"\n  ]\n}';
  assert.equal(got, expected, `toJson gab ${JSON.stringify(got)} zurück, erwartet war ${JSON.stringify(expected)}`);
});

test('copyData kopiert jeden Schlüssel', () => {
  const got = copyData({ owner: 'Ada', items: ['tea'] });
  assert.deepEqual(got, { owner: 'Ada', items: ['tea'] }, `copyData gab ${JSON.stringify(got)} zurück`);
});

test('Das verschachtelte Array der Kopie zu ändern lässt das Original unverändert', () => {
  const data = { owner: 'Ada', items: ['tea'] };
  const copy = copyData(data);
  copy.items.push('milk');
  assert.deepEqual(data.items, ['tea'], `die items des Originals wurden zu ${JSON.stringify(data.items)}, erwartet war ["tea"]`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test

learnrun.js herunterladen

Häufige Fehler

Ein Komma am Ende im JSON

const text = '{"name": "Ada", "age": 36,}';
const user = JSON.parse(text);
console.log(user.name);

Was Node.js ausgibt

SyntaxError: Expected double-quoted property name in JSON at position 26 (line 1 column 27)

Warum, und die Lösung

JavaScript erlaubt ein Komma nach dem letzten Eintrag, JSON nicht. Nach dem Komma erwartet JSON.parse einen weiteren Schlüssel in doppelten Anführungszeichen und findet }, an Position 26 (gezählt ab 0). Entfernen Sie das Komma: '{"name": "Ada", "age": 36}'. JSON aus JSON.stringify hat dieses Problem nie; es entsteht bei JSON, das von Hand geschrieben wurde.

Einfache Anführungszeichen im JSON

const text = "{'name': 'Ada'}";
const user = JSON.parse(text);
console.log(user.name);

Was Node.js ausgibt

SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)

Warum, und die Lösung

JSON-Schlüssel und -Strings nehmen nur doppelte Anführungszeichen, deshalb ist das einfache Anführungszeichen an Position 1 kein Eigenschaftsname. Schreiben Sie das JSON mit doppelten Anführungszeichen und setzen Sie den JavaScript-String in einfache Anführungszeichen oder Backticks: '{"name": "Ada"}'. Firefox und Safari formulieren diese Meldung anders; die Position ist der Hinweis.

Etwas parsen, das schon ein Objekt ist

const user = { name: "Ada" };
const data = JSON.parse(user);
console.log(data.name);

Was Node.js ausgibt

SyntaxError: "[object Object]" is not valid JSON

Warum, und die Lösung

JSON.parse nimmt Text. Bekommt es ein Objekt, wandelt es dieses zuerst in einen String um, "[object Object]", und das ist kein JSON. user ist schon ein Objekt: Verwenden Sie es direkt, user.name. Parsen Sie nur Strings, die JSON enthalten, etwa Text aus einer Datei, von einem Server oder aus JSON.stringify.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Kernideen

JSON ist Text mit strengen Regeln

JSON ist ein Textformat für Daten, das wie JavaScript-Literale aussieht: Objekte, Arrays, Strings, Zahlen, true, false und null. Im Programm ist JSON immer ein String, etwa '{"name": "Ada"}'; ein Objekt wird es erst durch Parsen, deshalb ist text.name undefined. Die Regeln sind strenger als in JavaScript: jeder Schlüssel und jeder String in doppelten Anführungszeichen, nie in einfachen; kein Komma nach dem letzten Eintrag; keine Kommentare; kein undefined, NaN, Infinity und keine Funktionen. Zahlen stehen schlicht da, ohne führende Null wie 01. Nicht jedes Objekt-Literal ist gültiges JSON, aber jedes JSON ist ein gültiges JavaScript-Literal.

JSON.parse liest Text und kann ihn ablehnen

JSON.parse(text) baut den Wert, den der Text beschreibt: '{"a": 1}' wird ein Objekt, '[1, 2]' ein Array, '"hi"' ein String, 'null' null. Text, der eine Regel bricht, beendet das Programm mit einem SyntaxError, und V8 nennt die Stelle: ein Komma am Ende in {"a": 1,} ergibt Expected double-quoted property name in JSON at position 8. Auch ein Objekt statt Text scheitert: JSON.parse macht daraus zuerst "[object Object]". Daten von außen haben vielleicht nicht die erwartete Form, also prüfen Sie sie: Array.isArray(data) für ein Array, typeof data === "object" && data !== null für ein Objekt. Eine Vorschau auf I4: try { … } catch (error) { … } lässt das Programm nach einem SyntaxError weiterlaufen.

JSON.stringify schreibt Text und lässt weg, was JSON nicht kennt

JSON.stringify(value) liefert den JSON-Text eines Werts, ohne Leerzeichen: {"a":1}. Ein drittes Argument rückt ihn ein, eine Ebene pro Zeile: JSON.stringify(data, null, 2) nimmt zwei Leerzeichen; das zweite Argument, hier null, bleibt in diesem Kurs leer. Werte, die JSON nicht kennt, fallen weg oder ändern sich: Ein Schlüssel mit undefined oder einer Funktion als Wert verschwindet, in einem Array werden sie zu null; NaN und Infinity werden null; ein Date wird ein String wie "1970-01-01T00:00:00.000Z". JSON.parse(JSON.stringify(data)) ist eine tiefe Kopie, verschachtelte Arrays eingeschlossen, aber nur für Daten aus einfachen Objekten, Arrays, Strings, Zahlen, Booleans und null.

Quellen

Zuletzt geprüft am 3. Oktober 2026

JSON: parse und stringify

Zum Aufwärmen aus Lektion B5.3: Was gibt dieser Code aus?

Sagen Sie es vorher, bevor Sie weiterlesen: text enthält JSON. Was gibt dieser Code aus?

Ergänzen Sie die Methode, die den JSON-Text in ein Objekt umwandelt, sodass die letzte Zeile 3 ausgibt.

Ordnen Sie jedem Aufruf zu, was er liefert.

Was gibt dieser Code aus?

Knobelaufgabe. Die Bestellung wird gespeichert und wieder geladen. Was gibt die letzte Zeile aus?

Selbst programmieren

Eine Leseliste als JSON

Übungen

Daten laden und ihre Form prüfen

Daten speichern und tief kopieren

Häufige Fehler

Ein Komma am Ende im JSON

Einfache Anführungszeichen im JSON

Etwas parsen, das schon ein Objekt ist

Abschlussquiz

Kernideen

JSON ist Text mit strengen Regeln

JSON.parse liest Text und kann ihn ablehnen

JSON.stringify schreibt Text und lässt weg, was JSON nicht kennt

Quellen