TOC

So arbeiten Sie mit JSON in JavaScript

Einführung

DaJSON von der JavaScript-Programmiersprache abgeleitet ist, ist es eine natürliche Wahl, sie als Datenformat in JavaScript zu verwenden. JSON, kurz fürJavaScript Object Notation, wird normalerweise wie der Name "Jason" ausgesprochen.

Weitere allgemeine Informationen zu JSON finden Sie im Tutorial „https://www.digitalocean.com/community/tutorials/an-introduction-to-json[An Introduction to JSON]“.

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

  • Daten speichern

  • Generieren von Datenstrukturen aus Benutzereingaben

  • Übertragen von Daten von Server zu Client, von Client zu Server und von Server zu Server

  • Daten konfigurieren und überprüfen

In diesem Tutorial erhalten Sie 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 ist von der JavaScript-Objektsyntax abgeleitet, basiert jedoch ausschließlich auf Text. Dies ist ein Schlüsselwert-Datenformat, das normalerweise in geschweiften Klammern dargestellt wird.

Wenn Sie mit JSON arbeiten, werden JSON-Objekte wahrscheinlich in einer.json-Datei angezeigt. Sie können jedoch auch als JSON-Objekt oder Zeichenfolge im Kontext eines Programms vorhanden sein. Lesen Sie mehr über diesyntax and structure here.

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

sammy.json

{
  "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
}

Darüber hinaus wird JSON möglicherweise als Zeichenfolge und nicht als Objekt im Kontext einer JavaScript-Programmdatei oder eines JavaScript-Skripts angezeigt. In diesem Fall können Sie auch alles in einer Zeile sehen: 

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 das allgemeine Format von JSON erläutert und erläutert, wie Sie es als.json-Datei oder in JavaScript als Objekt oder Zeichenfolge erwarten können.

Vergleich mit JavaScript-Objekt

Es ist zu beachten, dass JSON für die Verwendung in jeder 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 hinsichtlich der an Werte übergebenen Typen weniger eingeschränkt, sodass sie Funktionen als Werte verwenden können.

Sehen 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_name,last_name,online oderfull_name),and In der letzten Zeile steht ein Funktionswert.

Wenn wir auf die Daten im obigen JavaScript-Objekt zugreifen möchten, können wirdot notation verwenden, umuser.first_name; aufzurufen und eine Zeichenfolge abzurufen. Wenn wir jedoch auf den vollständigen Namen zugreifen möchten, müssen wir dies bis tun user.full_name(); aufrufen, weil es eine Funktion ist.

JavaScript-Objekte können nur in der JavaScript-Sprache vorhanden sein. Wenn Sie also mit Daten arbeiten, auf die in verschiedenen Sprachen zugegriffen werden muss, sollten Sie sich für JSON entscheiden.

Zugriff auf JSON-Daten

Auf JSON-Daten wird normalerweise in Javascript durch Punktnotation zugegriffen. Um zu verstehen, wie dies funktioniert, betrachten wir das JSON-Objektsammy: 

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

Um auf einen der Werte zuzugreifen, verwenden wir eine Punktnotation, die folgendermaßen aussieht: 

sammy.first_name
sammy.last_name
sammy.online

Die Variablesammy steht an erster Stelle, gefolgt von einem Punkt und dem Schlüssel, auf den zugegriffen werden soll.

Um eine JavaScript-Warnung zu erstellen, die den Wert anzeigt, der dem Schlüsselfirst_name in einem Popup zugeordnet ist, können Sie dies tun, indem Sie die JavaScript-Funktionalert()aufrufen: 

alert(sammy.first_name);
OutputSammy

Hier haben wir den mit dem Schlüsselfirst_nameverknüpften Wert aus dem JSON-Objektsammyerfolgreich aufgerufen.

Wir können auch die eckige Klammersyntax verwenden, um auf Daten von JSON zuzugreifen. Dazu setzen wir den Schlüssel in doppelte Anführungszeichen in eckige Klammern. Für unsere Variablesammy oben sieht die Verwendung der Syntax in eckigen Klammern in eineralert()-Funktion folgendermaßen aus: 

alert(sammy["online"]);
Outputtrue

Wenn Sie mitnested array elements arbeiten, sollten Sie die Nummer des Elements in Ihrem Array aufrufen. Betrachten wir den folgenden JSON: 

var user_profile = {
  "username" : "SammyShark",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

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

alert(user_profile.social_media[1].description);
Outputfacebook

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

Durch die Verwendung der Punktnotation oder der Syntax in eckigen Klammern 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 beschrieben. Das Konvertieren von JSON von einem Objekt in einen String und umgekehrt ist nützlich, um Daten zu übertragen und zu speichern.

JSON.stringify()

Die FunktionJSON.stringify() konvertiert ein Objekt in eine JSON-Zeichenfolge.

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

Wir betrachten ein JSON-Objekt, das wir der Variablenobj zuweisen, und konvertieren es dann mitJSON.stringify(), indem wirobj an die Funktion übergeben. Wir können diese Zeichenfolge der Variablens zuweisen: 

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

Wenn wir jetzt mits arbeiten, steht uns der JSON als Zeichenfolge und nicht als Objekt zur Verfügung. 

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

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

JSON.parse()

Zeichenfolgen sind nützlich für den Transport, Sie möchten sie jedoch wieder in ein JSON-Objekt auf der Client- und / oder Serverseite konvertieren können. Sie können zwar Text mit der Funktioneval()in ein Objekt konvertieren, dieser ist jedoch nicht sehr sicher. Daher verwenden wir stattdessen die FunktionJSON.parse().

Um das Beispiel im obigen AbschnittJSON.stringify() zu konvertieren, übergeben wir den Strings an die Funktion und weisen ihn einer neuen Variablen zu: 

var o = JSON.parse(s)

Dann hätten wir das Objekto, mit dem wir arbeiten könnten, das mit dem Objektobj identisch wäre.

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












OutputName: Sammy Shark
Location: Ocean

Im Kontext einer HTML-Datei können wir sehen, wie die JSON-Zeichenfolges in ein Objekt konvertiert wird, das beim endgültigen Rendern der Seite durchaccessing the JSON über die Punktnotation abgerufen werden kann.

JSON.parse() ist eine sichere Funktion zum Parsen von JSON-Zeichenfolgen und zum Konvertieren in Objekte.

Fazit

JSON ist ein natürliches Format zur Verwendung in JavaScript und verfügt über zahlreiche Implementierungen, die in vielen gängigen Programmiersprachen verwendet werden können. Wenn Sie das Format in einer anderen Programmiersprache verwenden möchten, finden Sie die vollständige Sprachunterstützung auf der Website „http://www.json.org/[Introducing JSON]“.

Da JSON leichtgewichtig ist und problemlos zwischen Programmiersprachen und Systemen übertragen werden kann, wird die Unterstützung von APIs, einschließlichTwitter API, verstärkt.

Sie werden wahrscheinlich keine eigenen.json-Dateien erstellen, sondern diese aus anderen Quellen beziehen. Sie können dieseresources überprüfen, um zu erfahren, wie Sie andere Datenstrukturen in JSON konvertieren.

Related