So arbeiten Sie mit JSON in JavaScript

Einführung

Da JSON von der Programmiersprache JavaScript abgeleitet ist, ist es eine natürliche Wahl, es als Datenformat in JavaScript zu verwenden. JSON, kurz für JavaScript Object Notation, wird normalerweise wie der Name „Jason“ ausgesprochen.“

Um mehr über JSON im Allgemeinen zu erfahren, lesen Sie das Tutorial „Eine Einführung in JSON“.

Um darüber nachzudenken, wo Sie JSON in Ihren JavaScript-Programmen verwenden können, sind einige allgemeine Anwendungsfälle von JSON:

• Speichern von Daten
• Generieren von Datenstrukturen aus Benutzereingaben
• Übertragen von Daten von Server zu Client, Client zu Server und Server zu Server
• Konfigurieren und Überprüfen von Daten

Dieses Tutorial bietet Ihnen eine Einführung in die Arbeit mit JSON in JavaScript. Um diese Einführung optimal nutzen zu können, sollten Sie mit der Programmiersprache JavaScript vertraut sein.

JSON-Format

Das Format von JSON leitet sich von der JavaScript-Objektsyntax ab, ist jedoch vollständig textbasiert. Es ist ein Schlüssel-Wert-Datenformat, das normalerweise in geschweiften Klammern gerendert wird.

Wenn Sie mit JSON arbeiten, werden Sie wahrscheinlich JSON-Objekte in einer .json -Datei sehen, aber sie können auch als JSON-Objekt oder String im Kontext eines Programms existieren. Lesen Sie hier mehr über die Syntax und Struktur.

Wenn Sie mit einer .json -Datei arbeiten, sieht sie folgendermaßen aus:

{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Wenn Sie stattdessen ein JSON-Objekt in einer .js oder .html Datei haben, wird es wahrscheinlich auf eine Variable gesetzt:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Zusätzlich können Sie kann JSON als Zeichenfolge und nicht als Objekt im Kontext einer JavaScript-Programmdatei oder eines Skripts sehen. In diesem Fall sehen Sie möglicherweise auch alles in einer Zeile:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Das Konvertieren von JSON-Objekten in Zeichenfolgen kann besonders nützlich sein, um Daten schnell zu transportieren.

Wir haben uns das allgemeine Format von JSON angesehen und wie Sie es als .json -Datei oder in JavaScript als Objekt oder String erwarten können.

Vergleich mit JavaScript-Objekt

Es ist zu beachten, dass JSON für jede Programmiersprache entwickelt wurde, während JavaScript-Objekte nur direkt über die JavaScript-Programmiersprache bearbeitet werden können.

In Bezug auf die Syntax ähneln JavaScript-Objekte JSON, aber die Schlüssel in JavaScript-Objekten sind keine Zeichenfolgen in Anführungszeichen. Außerdem sind JavaScript-Objekte in Bezug auf Typen, die an Werte übergeben werden, weniger eingeschränkt, sodass sie Funktionen als Werte verwenden können.

Schauen wir uns ein Beispiel für ein JavaScript-Objekt des Website-Benutzers Sammy Shark an, der gerade online ist.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Dies wird Ihnen als JSON-Objekt sehr vertraut vorkommen, aber es gibt keine Anführungszeichen um einen der Schlüssel (first_namelast_nameonline oder full_name), und in der letzten Zeile befindet sich ein Funktionswert.

Wenn wir auf die Daten im obigen JavaScript-Objekt zugreifen möchten, könnten wir die Punktnotation verwenden, um user.first_name; aufzurufen und eine Zeichenfolge zu erhalten, aber wenn wir auf den vollständigen Namen zugreifen möchten, müssten wir dies tun, indem wir user.full_name(); aufrufen, da es sich um eine Funktion handelt.Wenn Sie also mit Daten arbeiten, auf die von verschiedenen Sprachen zugegriffen werden muss, entscheiden Sie sich am besten für JSON.

Zugriff auf JSON-Daten

Auf JSON-Daten wird normalerweise in Javascript über die Punktnotation zugegriffen. Um zu verstehen, wie das funktioniert, betrachten wir das JSON-Objekt sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Um auf einen der Werte zuzugreifen, verwenden wir eine Punktnotation, die wie folgt aussieht:

sammy.first_namesammy.last_namesammy.online

Die Variable sammy ist zuerst, gefolgt von einem Punkt, gefolgt von dem Schlüssel, auf den zugegriffen werden soll.

Um eine JavaScript-Warnung zu erstellen, die uns den Wert des Schlüssels first_name in einem Popup anzeigt, können wir dies tun, indem wir die Funktion JavaScript alert() aufrufen:

alert(sammy.first_name);

Output
Sammy

Hier haben wir erfolgreich den Wert aufgerufen, der dem first_name Schlüssel aus dem sammy JSON-Objekt zugeordnet ist.

Wir können auch eckige Klammern verwenden, um auf Daten aus JSON zuzugreifen. Um dies zu tun, würden wir den Schlüssel in doppelten Anführungszeichen in eckigen Klammern halten. Für unsere sammy Variable oben sieht die Verwendung der Syntax eckiger Klammern in einer alert() -Funktion folgendermaßen aus:

alert(sammy);

Output
true

Wenn Sie mit verschachtelten Array-Elementen arbeiten, sollten Sie die Nummer des Elements in Ihrem Array aufrufen. Betrachten wir den folgenden JSON:

var user_profile = { "username" : "SammyShark", "social_media" : }

Um auf die Zeichenfolge facebookzuzugreifen, können wir dieses Element im Array im Kontext der Punktnotation aufrufen:

alert(user_profile.social_media.description);

Output
facebook

Beachten Sie, dass für jedes Element verschachteltes Element Wir verwenden einen zusätzlichen Punkt.

Durch die Verwendung von Punktnotation oder eckiger Klammer-Syntax können wir auf die im JSON-Format enthaltenen Daten zugreifen.

Funktionen zum Arbeiten mit JSON

In diesem Abschnitt werden zwei Methoden zum Stringifizieren und Parsen von JSON behandelt. Die Möglichkeit, JSON von Objekt in String und umgekehrt zu konvertieren, ist nützlich für die Übertragung und Speicherung von Daten.

JSON.stringify()

Die JSON.stringify() Funktion konvertiert ein Objekt in einen JSON-String.

Zeichenfolgen sind nützlich, um Daten von einem Client zu einem Server zu transportieren, indem Informationen auf einfache Weise gespeichert oder weitergegeben werden. Sie können beispielsweise die Einstellungen eines Benutzers auf der Clientseite erfassen und dann an einen Server senden. Später können Sie die Informationen dann mit der JSON.parse() -Methode lesen und nach Bedarf mit den Daten arbeiten.

Wir betrachten ein JSON-Objekt, das wir der Variablen obj zuweisen, und konvertieren es dann mit JSON.stringify() , indem wir obj an die Funktion übergeben. Wir können diesen String der Variablen s zuweisen:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Wenn wir nun mit sarbeiten, haben wir den JSON als String und nicht als Objekt zur Verfügung.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

Mit der JSON.stringify() Funktion können wir Objekte in Zeichenfolgen konvertieren. Um das Gegenteil zu tun, betrachten wir die Funktion JSON.parse() .

JSON.parse()

Zeichenfolgen sind nützlich für den Transport, aber Sie möchten sie auf der Client- und / oder Serverseite wieder in ein JSON-Objekt konvertieren können. Während Sie Text mit der Funktion eval() in ein Objekt konvertieren können, ist dies nicht sehr sicher, daher verwenden wir stattdessen die Funktion JSON.parse() .

Um das Beispiel in den JSON zu konvertieren.stringify() Abschnitt oben, wir würden die Zeichenfolge übergeben s an die Funktion, und weisen sie einer neuen Variablen zu:

var o = JSON.parse(s)

Dann hätten wir das Objekt o zum Arbeiten, Das wäre identisch mit dem Objekt obj.

Um einen genaueren Blick darauf zu werfen, betrachten wir ein Beispiel für JSON.parse() im Kontext einer HTML-Datei:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

Im Kontext einer HTML-Datei können wir sehen, wie der JSON-String s in ein Objekt konvertiert wird, das beim endgültigen Rendern der Seite durch Zugriff auf den JSON über die Punktnotation abgerufen werden kann.

JSON.parse() ist eine sichere Funktion, um JSON-Strings zu analysieren und in Objekte zu konvertieren.

Fazit

JSON ist ein natürliches Format für JavaScript und verfügt über viele Implementierungen, die in vielen gängigen Programmiersprachen verwendet werden können. Wenn Sie das Format in einer anderen Programmiersprache verwenden möchten, können Sie die vollständige Sprachunterstützung auf der Website „Introducing JSON“ sehen.

Da JSON leichtgewichtig ist und problemlos zwischen Programmiersprachen und -systemen übertragen werden kann, wird JSON in APIs, einschließlich der Twitter-API, zunehmend unterstützt.