EMZETT.
Login

Emzett Wiki

JavaScript: JSON

Properties1
tagsprogrammiersprachen, javascript

3 Min. Lesezeit

Kurz: JSON (JavaScript Object Notation) ist das Standardformat für den Austausch von Daten im Web. Es sieht aus wie JavaScript-Objekte, ist aber strenger.

Teil des Kurses JavaScript

Kapitel 18 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

JSON (JavaScript Object Notation) ist das Standardformat für den Austausch von Daten im Web. Es sieht aus wie JavaScript-Objekte, ist aber strenger: Schlüssel stehen in doppelten Anführungszeichen, es gibt keine Kommentare und keine Funktionen.

{
  "name": "Mia",
  "alter": 17,
  "hobbys": ["Lesen", "Rad"],
  "aktiv": true,
  "partner": null
}

Erlaubte Typen: Objekt, Array, Text, Zahl, true/false, null. Nicht erlaubt: undefined, Funktionen, Datumsobjekte (sie werden zu Text), NaN, Infinity.

JSON.stringify: Objekt → Text

const daten = { name: "Mia", alter: 17, hobbys: ["Lesen", "Rad"], aktiv: true, partner: null };
const text = JSON.stringify(daten);
console.log(text);
console.log(typeof text);
console.log(JSON.stringify(daten, null, 2));      // schön eingerückt
console.log(JSON.stringify([1, "a", undefined, () => 1, NaN]));
console.log(JSON.stringify({ a: undefined, b: () => 1, c: 1 }));

Ausgabe:

{"name":"Mia","alter":17,"hobbys":["Lesen","Rad"],"aktiv":true,"partner":null}
string
{
  "name": "Mia",
  "alter": 17,
  "hobbys": [
    "Lesen",
    "Rad"
  ],
  "aktiv": true,
  "partner": null
}
[1,"a",null,null,null]
{"c":1}

JSON.parse: Text → Objekt

const text = '{"produkte":[{"name":"Stift","preis":1.5},{"name":"Heft","preis":2}]}';
const daten = JSON.parse(text);
console.log(daten.produkte[1].name);
console.log(daten.produkte.reduce((s, p) => s + p.preis, 0));
 
try {
  JSON.parse("{name: 'Mia'}");        // ungültig: Schlüssel ohne Anführungszeichen
} catch (e) {
  console.log(e.name);
}

Ausgabe:

Heft
3.5
SyntaxError

Packe JSON.parse immer in try/catch, wenn der Text von außen kommt.

Auswählen und Umwandeln

stringify akzeptiert eine Liste der gewünschten Schlüssel oder eine Funktion; parse einen “Reviver”:

const nutzer = { name: "Mia", passwort: "geheim", geburt: new Date(Date.UTC(2008, 4, 1)) };
console.log(JSON.stringify(nutzer, ["name"]));
console.log(JSON.stringify(nutzer, (k, v) => (k === "passwort" ? undefined : v)));
 
const roh = JSON.stringify(nutzer);
const zurueck = JSON.parse(roh, (k, v) => (k === "geburt" ? new Date(v) : v));
console.log(zurueck.geburt.getUTCFullYear());

Ausgabe:

{"name":"Mia"}
{"name":"Mia","geburt":"2008-05-01T00:00:00.000Z"}
2008

toJSON

Ein Objekt kann mit toJSON() selbst bestimmen, wie es serialisiert wird:

class Punkt {
  constructor(x, y) { this.x = x; this.y = y; }
  toJSON() { return [this.x, this.y]; }
}
console.log(JSON.stringify({ p: new Punkt(3, 4) }));

Ausgabe:

{"p":[3,4]}

Tiefe Kopie (einfach)

const original = { a: { b: 1 } };
const kopie = JSON.parse(JSON.stringify(original));
kopie.a.b = 2;
console.log(original.a.b, kopie.a.b);

Ausgabe:

1 2

Das funktioniert nur für reine JSON-Daten. Besser ist structuredClone(), das auch Datum, Map und Set kann.

JSON im Alltag

  • Antworten von Web-APIs (await response.json())
  • Konfigurationsdateien wie package.json
  • Speichern in localStorage (nur Text möglich)
  • Austausch zwischen Programmen und Sprachen

Merke

  • JSON.stringify macht aus Daten Text, JSON.parse aus Text Daten
  • Funktionen und undefined gehen verloren, Datum wird zu Text
  • parse bei fremden Daten in try/catch setzen
  • Mit null, 2 formatierst du lesbar
  • structuredClone ist die bessere Tiefenkopie

Übungsaufgabe

Wandle ein Objekt mit einer Liste von drei Büchern in JSON-Text um, parse den Text zurück und gib die Titel aus.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Map, Set und WeakMap

Weiter: Datum und Zeit

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks