Arbeiten mit JSON

JSON ist ein textbasiertes Datenformat, das der JavaScript-Objektsyntax folgt. Es stellt strukturierte Daten als Zeichenfolge dar, was nützlich ist, wenn Sie Daten über ein Netzwerk übertragen möchten. Obwohl es der Syntax von JavaScript-Objektliteralen sehr ähnlich sieht, kann es unabhängig von JavaScript verwendet werden. Viele Programmierumgebungen bieten die Möglichkeit, JSON zu lesen (parsen) und zu erzeugen. In JavaScript werden die Methoden zum Parsen und Erstellen von JSON vom JSON-Objekt bereitgestellt.

Eine JSON-Zeichenkette kann in einer eigenen Datei gespeichert werden, die im Grunde nur eine Textdatei mit der Erweiterung .json und einem MIME-Typ von application/json ist.

Wie oben beschrieben, ist JSON eine Zeichenkette, deren Format sehr dem Format von JavaScript-Objektliteralen ähnelt. Das Folgende ist eine gültige JSON-Zeichenkette, die ein Objekt darstellt. Achten Sie darauf, dass es auch ein gültiges JavaScript-Objektliteral ist — nur mit einigen Syntaxbeschränkungen.

{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] } 

Wenn Sie dieses JSON in Ihrem JavaScript-Programm als Zeichenfolge laden, können Sie es in ein normales Objekt parsen und dann auf die darin enthaltenen Daten mit der gleichen Punkt-/Klammernotation zugreifen, die wir im Artikel JavaScript-Objektgrundlagen betrachtet haben. Zum Beispiel:

superHeroes.homeTown; superHeroes.members[1].powers[2]; 

1. Zuerst haben wir den Variablennamen — superHelden.
2. Innerhalb von diesem möchten wir auf die Eigenschaft members zugreifen, also verwenden wir .members.
3. members enthält ein Array, das mit Objekten gefüllt ist. Wir möchten auf das zweite Objekt im Array zugreifen, also verwenden wir [1].
4. Innerhalb dieses Objekts möchten wir auf die Eigenschaft powers zugreifen, also verwenden wir .powers.
5. In der powers-Eigenschaft befindet sich ein Array, das die Superkräfte des ausgewählten Helden enthält. Wir möchten die dritte, also verwenden wir [2].

Der Hauptpunkt ist, dass es wirklich nichts Besonderes beim Arbeiten mit JSON gibt; nachdem Sie es in ein JavaScript-Objekt geparst haben, arbeiten Sie damit genauso, wie Sie mit einem Objekt arbeiten würden, das mit der gleichen Objektsyntax deklariert wurde.

Oben haben wir erwähnt, dass JSON-Text im Grunde aussieht wie ein JavaScript-Objekt innerhalb einer Zeichenfolge. Wir können auch Arrays zu/von JSON konvertieren. Das nachstehende Beispiel ist vollkommen gültiges JSON:

[ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] } ] 

Sie müssen auf Array-Elemente (in ihrer geparsten Version) zugreifen, indem Sie mit einem Array-Index beginnen, zum Beispiel superHelden[0].powers[0].

JSON kann auch eine einzelne primitive enthalten. Zum Beispiel 29, "Dan Jukes" oder true sind alle gültige JSON.

Wie bereits erwähnt, ist jedes JSON ein gültiges JavaScript-Literal (Objekt, Array, Zahl usw.). Das Umgekehrte stimmt jedoch nicht – nicht alle JavaScript-Objektliterale sind gültiges JSON.

• JSON kann nur serialisierbare Datentypen enthalten. Das bedeutet:
  • Bei Primitiven kann JSON String-Literale, Zahlenliterale, true, false und null enthalten. Bemerkenswerterweise kann es undefined, NaN oder Infinity nicht enthalten.
  • Bei Nicht-Primitiven kann JSON Objektliterale und Arrays enthalten, jedoch keine Funktionen oder andere Objekttypen wie Date, Set und Map. Die in JSON enthaltenen Objekte und Arrays müssen ferner gültige JSON-Datentypen enthalten.
• Strings müssen in Anführungszeichen eingeschlossen sein, nicht in Einzelanführungszeichen.
• Zahlen müssen in Dezimalnotation geschrieben werden.
• Jede Eigenschaft eines Objekts muss in der Form "Schlüssel": Wert vorliegen. Eigenschaftsnamen müssen String-Literale sein, die in Anführungszeichen eingeschlossen sind. Besondere JavaScript-Syntax, wie Methoden, ist nicht erlaubt, da Methoden Funktionen sind, und Funktionen sind keine gültigen JSON-Datentypen.
• Objekte und Arrays dürfen keine nachgestellten Kommas enthalten.
• Kommentare sind in JSON nicht erlaubt.

Schon ein einziges falsch platziertes Komma oder Doppelpunkt kann eine JSON-Datei ungültig machen und dazu führen, dass sie fehlschlägt. Sie sollten Vorsicht walten lassen, um alle Daten zu validieren, die Sie verwenden möchten (obwohl computererzeugtes JSON weniger wahrscheinlich Fehler enthält, solange das Erzeugerprogramm korrekt arbeitet). Sie können JSON mit einer Anwendung wie JSONLint oder JSON-validate validieren.

Lassen Sie uns also ein Beispiel durchgehen, um zu zeigen, wie wir einige JSON-formatierte Daten auf einer Website nutzen könnten.

Erstellen Sie zu Beginn lokale Kopien unserer Dateien heroes.html und style.css. Letztere enthält etwas einfachen CSS, um unsere Seite zu gestalten, während die erstere sehr einfaches HTML für den Body enthält, plus ein <script>-Element, um den JavaScript-Code zu enthalten, den wir in dieser Übung schreiben werden:

<header> ... </header> <section> ... </section> <script> ... </script> 

Wir haben unsere JSON-Daten auf unserem GitHub unter https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json verfügbar gemacht.

Wir werden das JSON in unser Skript laden und einige coole DOM-Manipulationen verwenden, um es anzuzeigen, so wie es hier aussieht:

Die oberste Funktion sieht so aus:

async function populate() { const requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; const request = new Request(requestURL); const response = await fetch(request); const superHeroes = await response.json(); populateHeader(superHeroes); populateHeroes(superHeroes); } 

Um das JSON zu erhalten, verwenden wir eine API namens Fetch. Diese API ermöglicht es uns, Netzwerk-Anfragen zu stellen, um Ressourcen von einem Server über JavaScript abzurufen (z. B. Bilder, Text, JSON oder sogar HTML-Snippets), was bedeutet, dass wir kleine Inhaltsbereiche aktualisieren können, ohne die gesamte Seite neu laden zu müssen.

In unserer Funktion verwenden die ersten vier Zeilen die Fetch API, um das JSON vom Server abzurufen:

• Wir deklarieren die Variable requestURL, um die GitHub-URL zu speichern
• Wir verwenden die URL, um ein neues Request-Objekt zu initialisieren.
• Wir führen die Netzwerk-Anfrage mit der Funktion fetch() durch, und dies gibt ein Response-Objekt zurück
• Wir rufen die Antwort als JSON ab, indem wir die Funktion json() des Response-Objekts verwenden.

Nach dem Ganzen enthält die Variable superHelden das JavaScript-Objekt, das auf dem JSON basiert. Wir übergeben dieses Objekt dann an zwei Funktionsaufrufe — der erste füllt den <header> mit den richtigen Daten, während der zweite eine Informationskarte für jeden Helden im Team erstellt und in den <section> einfügt.

Nachdem wir die JSON-Daten abgerufen und in ein JavaScript-Objekt umgewandelt haben, lassen Sie uns diese verwenden, indem wir die beiden Funktionen schreiben, die wir oben erwähnt haben. Zuerst fügen Sie die folgende Funktionsdefinition unter dem vorherigen Code hinzu:

function populateHeader(obj) { const header = document.querySelector("header"); const myH1 = document.createElement("h1"); myH1.textContent = obj.squadName; header.appendChild(myH1); const myPara = document.createElement("p"); myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`; header.appendChild(myPara); } 

Hier erstellen wir zuerst ein h1-Element mit createElement(), setzen dessen textContent, um der squadName-Eigenschaft des Objekts zu entsprechen, und hängen es dann an den Header mit appendChild() an. Dann führen wir einen sehr ähnlichen Vorgang mit einem Absatz durch: Erstellen Sie ihn, setzen Sie seinen Textinhalt und fügen ihn dem Header hinzu. Der einzige Unterschied besteht darin, dass sein Text auf ein Template Literal gesetzt wird, das sowohl die homeTown- als auch formed-Eigenschaften des Objekts enthält.

Fügen Sie als nächstes die folgende Funktion am Ende des Codes hinzu, die die Heldenkarten erstellt und anzeigt:

function populateHeroes(obj) { const section = document.querySelector("section"); const heroes = obj.members; for (const hero of heroes) { const myArticle = document.createElement("article"); const myH2 = document.createElement("h2"); const myPara1 = document.createElement("p"); const myPara2 = document.createElement("p"); const myPara3 = document.createElement("p"); const myList = document.createElement("ul"); myH2.textContent = hero.name; myPara1.textContent = `Secret identity: ${hero.secretIdentity}`; myPara2.textContent = `Age: ${hero.age}`; myPara3.textContent = "Superpowers:"; const superPowers = hero.powers; for (const power of superPowers) { const listItem = document.createElement("li"); listItem.textContent = power; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } } 

Zuerst speichern wir die members-Eigenschaft des JavaScript-Objekts in einer neuen Variable. Dieses Array enthält mehrere Objekte, die die Informationen für jeden Helden enthalten.

Als nächstes verwenden wir eine for...of Schleife, um jedes Objekt im Array durchzugehen. Für jedes einzelne:

1. Erstellen Sie mehrere neue Elemente: ein <article>, ein <h2>, drei <p>s und ein <ul>.
2. Setzen Sie das <h2> so, dass es den aktuellen Helden name enthält.
3. Füllen Sie die drei Absätze mit ihrem secretIdentity, age und einer Zeile, die "Superpowers:" sagt, um die Informationen in der Liste einzuführen.
4. Speichern Sie die powers-Eigenschaft in einer weiteren neuen Konstante namens superPowers — dies enthält ein Array, das die Superkräfte des aktuellen Helden auflistet.
5. Verwenden Sie eine weitere for...of Schleife, um die aktuellen Superkräfte des Helden zu durchlaufen — für jede erstellen wir ein <li>-Element, setzen die Superkraft da hinein, und setzen dann das listItem mit appendChild() in das <ul> Element (myList).
6. Das allerletzte, was wir tun, ist, <h2>, <p>s und <ul> innerhalb des <article> (myArticle) hinzuzufügen, und dann das <article> innerhalb des <section>. Die Reihenfolge, in der Dinge hinzugefügt werden, ist wichtig, da dies die Reihenfolge ist, in der sie im HTML angezeigt werden.

Schließlich müssen wir unsere oberste populate()-Funktion aufrufen:

populate(); 

Das obige Beispiel war einfach, was den Zugriff auf das JavaScript-Objekt betrifft, weil wir die Netzwerk-Antwort direkt in ein JavaScript-Objekt umgewandelt haben, indem wir response.json() benutzt haben.

Aber manchmal haben wir nicht so viel Glück — manchmal erhalten wir eine rohe JSON-Zeichenkette und müssen sie selbst in ein Objekt umwandeln. Und wenn wir ein JavaScript-Objekt über das Netzwerk senden wollen, müssen wir es vor dem Senden in JSON (eine Zeichenkette) umwandeln. Zum Glück sind diese beiden Probleme im Webentwicklung so häufig, dass ein eingebautes JSON-Objekt in Browsern verfügbar ist, das die folgenden zwei Methoden enthält:

• parse(): Akzeptiert eine JSON-Zeichenkette als Parameter und gibt das entsprechende JavaScript-Objekt zurück.
• stringify(): Akzeptiert ein Objekt als Parameter und gibt die äquivalente JSON-Zeichenkette zurück.

Sie können den ersten in unserem Beispiel heroes-finished-json-parse.html sehen (sehen Sie sich den Quellcode an) — dieses tut genau das gleiche wie das zuvor entwickelte Beispiel, außer dass:

• Wir die Antwort als Text statt als JSON abrufen, indem wir die Methode text() der Antwort verwenden
• Wir dann parse() verwenden, um den Text in ein JavaScript-Objekt zu konvertieren.

Das entscheidende Code-Snippet ist hier:

async function populate() { const requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; const request = new Request(requestURL); const response = await fetch(request); const superHeroesText = await response.text(); const superHeroes = JSON.parse(superHeroesText); populateHeader(superHeroes); populateHeroes(superHeroes); } 

Wie Sie vielleicht vermuten, funktioniert stringify() in die entgegengesetzte Richtung. Versuchen Sie, die folgenden Zeilen einzeln in die JavaScript-Konsole Ihres Browsers einzugeben, um sie in Aktion zu sehen:

let myObj = { name: "Chris", age: 38 }; myObj; let myString = JSON.stringify(myObj); myString; 

Hier erstellen wir ein JavaScript-Objekt, überprüfen, was es enthält, konvertieren es dann mit stringify() in eine JSON-Zeichenkette — speichern den Rückgabewert in einer neuen Variablen — und überprüfen es dann erneut.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Wissen: JSON.

In dieser Lektion haben wir Ihnen die Verwendung von JSON in Ihren Programmen vorgestellt, einschließlich der Erstellung und des Parsens von JSON sowie des Zugriffs auf Daten, die in JSON gespeichert sind. Im nächsten Artikel werden wir uns praktische Techniken zur Debuggung von JavaScript und zur Fehlerbehandlung ansehen.

• JSON-Referenz
• Übersicht über die Fetch API
• Verwendung von Fetch
• HTTP-Anforderungsmethoden

• Zurück
• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter