JSON in JavaScript
Die vorige Seite hat nur am Aufruf gedreht, und this ist dem Aufruf gefolgt. Diese Seite lässt das liegen. Die Ware sitzt noch im Speicher, Name und Preis am Objekt. Wer dieselben Angaben einer Datei, einem anderen Programm oder einer späteren Seite geben will, braucht einen Text mit fester Form. Dieser Text heißt JSON.
Das lebende Objekt ist nicht die Notiz
Solange das Skript läuft, bleibt das Objektliteral da, und eine Methode darf darauf sitzen; this hängt weiter am Aufruf, wie auf der vorigen Seite. JSON ist nur eine Zeichenkette: keine Methoden, und es wählt this nicht selbst.
Was der Text enthalten darf
📊 Lebendes Objekt gegen JSON-Text
| Teil | Objektliteral | JSON-Text |
|---|---|---|
| Schlüsselzeichen | optional | doppelte Anführungszeichen Pflicht |
| Zeichenketten | einfach oder doppelt | nur doppelt |
| Nachgestelltes Komma | erlaubt | verboten |
| Funktion | darf eine Methode sein | stringify lässt sie weg; im Text getippt ist sie ungültig |
| Feld undefined | ein echter Wert | fällt weg, wenn stringify das Objekt abläuft |
Gewohnheiten aus dem Objektliteral gehören nicht in diesen Text. Jeder Schlüssel und jede Zeichenkette braucht doppelte Anführungszeichen. Ein nachgestelltes Komma, ein Kommentar im Text und eine nackte Funktion sind kein gültiges JSON. Die Tabelle zeigt, was still verschwindet und was parse gar nicht erst annimmt.
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));
stringify schreibt die Notiz
JSON.stringify geht über die schlichten Felder und gibt eine Zeichenkette zurück; die Konsole zeigt {"name":"Mug","price":12}, und product selbst bleibt unverändert. Den Namen liest du weiter am lebenden Objekt und bekommst Mug. Die Zeichenkette ist ein eigener Wert, den du speichern oder verschicken kannst.
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);
parse baut aus der Notiz einen Wert
text ist weiterhin eine Zeichenkette, inklusive Anführungszeichen und Klammern. JSON.parse baut daraus ein neues Objekt. Danach ist product.name gleich Mug. Hier läuft keine Methode, und this spielt keine Rolle.
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);
Eine Liste darf in der Notiz stecken
JSON-Text kann ein Array tragen; nach parse ist product.tags ein echtes Array, und der erste Eintrag ist ceramic. Arrays als eigenes Thema kommen als Nächstes, hier sind sie nur Fracht im Text.
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));
Die Notiz behält Daten, nicht Verhalten
price war undefined. tag war eine Funktion. Beides fällt aus dem Text. Gedruckt wird nur {"name":"Mug"}. Das Verhalten bleibt am lebenden Objekt und wandert nicht in die Notiz.
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}
Eine schlampige Notiz lässt sich nicht lesen
Einfache Anführungszeichen und ein Schlüssel ohne Anführungszeichen sind im Objektliteral erlaubt und in JSON verboten; darum wirft JSON.parse, und der catch druckt bad text, statt diese Demo abstürzen zu lassen. Setze doppelte Anführungszeichen an den Schlüssel und an die Zeichenkette. Das ist noch nicht die spätere Fehler-Lektion, sondern nur der Hinweis, dass kaputtes JSON parse stoppt.
Die Richtung sagt dir das Werkzeug
Vom Speicher zum Text gehst du mit stringify, vom Text zurück zum Wert mit parse. Brauchst du danach eine Funktion an der Ware, hängst du sie nach parse an, weil die Notiz sie nicht mitgebracht hat. this hängt weiter am Aufruf und nicht an JSON, und die nächste Lektion sind Arrays: eine lebende Liste im Skript, keine neue JSON-Regel.
Ein Feld aus der Notiz auf die Seite setzen
Lies eine kleine Produktzeichenkette mit parse. Schreib den Namen in den Absatz. Bau das Objekt im Skript nicht mit geschweiften Klammern.
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>
Der Absatz zeigt Mug, weil das Skript nur Text gelesen hat und kein Objektliteral gebaut hat. Änder den Namen in der Zeichenkette und lade neu, dann folgt die Zeile.
Übungsschritte
- Wende stringify auf die Tasse an und lies den Text in Anführungszeichen, danach parse dieselbe Form und sieh
Mug. - Lies die Notiz mit
tagsund holceramic. - Wende stringify auf ein Objekt mit Methode und Preis
undefinedan, sodass nurnameim Text bleibt, und leg eine Notiz mit nacktem Schlüssel intry/catch, bisbad texterscheint. - Änder in der HTML-Demo nur den Namen in der Zeichenkette, lade neu und lies den Absatz.
Häufige Ausrutscher
- JSON-Text mit einem Objektliteral verwechseln und einfache Anführungszeichen oder einen nackten Schlüssel an
parsegeben - Erwarten, dass eine Methode oder
undefinedstringifyübersteht parserufen, obwohl du Text wolltest, oderstringify, obwohl der Text schon da ist, und den Namen an der Zeichenkette selbst lesen statt am Wert ausparse- Die nächste Seite für weiteres JSON halten, obwohl Arrays eine lebende Liste sind
Kurz gefasst
- JSON ist Text, der Daten beschreibt, und
stringifymacht aus einem schlichten Objekt genau diesen Text parsemacht aus dem Text wieder einen Wert- Schlüssel und Zeichenketten brauchen doppelte Anführungszeichen; ein nachgestelltes Komma oder einfache Zeichen lassen
parsescheitern - Methoden und Felder mit
undefinedfallen aus dem Text - Ein gelesenes Feld kann eine Zeile auf der Seite füllen, und als Nächstes kommen Arrays, eine lebende Liste im Skript
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt