Ein Tutorial zur Arbeit mit JSON in JavaScript

Einführung

Es gibt viele Möglichkeiten, wie JSON in JavaScript verwendet werden kann. Eine der grundlegendsten Anwendungen ist das Speichern von Daten. Sie können es auch verwenden, um Daten zwischen Clients, zwischen Servern oder vom Server zum Client zu übertragen. Weitere nützliche Anwendungen sind die Konfiguration und Überprüfung von Daten sowie die Generierung von Datenstrukturen.

In diesem Tutorial werden wir untersuchen, wie Sie JSON in Ihren JavaScript-Programmen verwenden können. Wenn Sie bereits Erfahrung mit der Programmierung in JavaScript haben, sollte Ihnen dies leichtfallen.

Was ist JSON?

JSON steht für JavaScript Object Notation. Es ist ein Format, das entwickelt wurde, um den Austausch verschiedener Datentypen zu ermöglichen. JSON nutzt hauptsächlich JavaScript als primäre Programmiersprache. Es funktioniert auch mit anderen Sprachen wie Python, PHP, Ruby, sowie Java. Es ist leicht zu lesen, extrem leichtgewichtig und erfordert nicht viel Formatierung. Sie können sich mit der allgemeinen Syntax und Struktur des Formats vertraut machen, indem Sie unserem Tutorial folgen: Ein Überblick über das JSON-Datenaustauschformat.

JSON kann eigenständig verwendet oder in einem anderen Dateiformat definiert werden. Wenn es eigenständig ist, verwendet es die Erweiterung .json. Wenn es in einem anderen Format vorliegt, erscheint es entweder als JSON-String in Anführungszeichen oder als einer Variablen zugewiesenes Objekt. Beispielsweise kann JSON auch im Format .html verwendet werden. Dieses Format ermöglicht es Ihnen, den Datentransfer zwischen dem Server und dem Browser relativ einfach durchzuführen.

Das JSON-Format ist textbasiert. Die Key-Value-Daten erscheinen in geschweiften Klammern. So sieht eine typische Datei .json aus:

Wenn Sie ein JSON-Objekt in einer .js oder .html-Datei haben, wird es als Variable wie folgt dargestellt:

In einigen Fällen sehen Sie sie alle in einer Zeile. Dies ist der Fall, wenn das JSON als String statt als Objekt in der JavaScript-Datei gerendert wird:

Sie können JSON-Objekte in Strings konvertieren. Dies ist nützlich, wenn Sie einen schnellen Datentransfer durchführen möchten.

JSON vs. JavaScript-Objekt

Wie bereits erwähnt, funktioniert JSON mit jeder Programmiersprache. Sie können jedoch nur mit JavaScript-Objekten arbeiten, wenn Sie JavaScript verwenden. Die Syntax in JSON und JavaScript ist ähnlich. Der Unterschied besteht darin, dass JavaScript-Objekte in Strings statt in Anführungszeichen erscheinen. Darüber hinaus können JavaScript-Objekte Funktionen als Werte verwenden, was bedeutet, dass sie weniger eingeschränkt sind.

In dem folgenden Beispiel zeigen wir die JavaScript-Option eines Benutzers. Der Benutzer ist Sammy Shark und er ist gerade online:

Wie Sie sehen können, gibt es keine Anführungszeichen um Schlüssel wie first_name, last_name, online oder full_name. Außerdem befindet sich in der letzten Zeile ein Funktionswert. Wenn Sie auf die Daten in String-Form zugreifen möchten, können Sie user.first_name mittels Punktnotation aufrufen. Wenn Sie stattdessen den vollständigen Namen wünschen, verwenden Sie user.full_name(), da es sich um eine Funktion handelt.

So greifen Sie auf JSON-Daten zu

Wie wir im letzten Abschnitt kurz angesprochen haben, können Sie in JavaScript mithilfe der Punktnotation auf JSON-Daten zugreifen. Nehmen wir das Beispiel eines JSON-Objekts namens sammy:

Unsere Punktnotation für den Zugriff auf die Werte lautet:

Zuerst kommt die Variable. Danach setzen wir einen Punkt. Zuletzt nennen wir den Schlüssel, auf den wir zugreifen möchten.

Nehmen wir an, wir möchten einen Alert in JavaScript erstellen, der den Wert des first_name-Schlüssels anzeigt. Damit er in einem Pop-up-Fenster erscheint, verwenden wir die JavaScript-Funktion alert() wie folgt:

Eine andere Möglichkeit, auf die Daten aus JSON zuzugreifen, ist die Verwendung der eckigen Klammern. Der Schlüssel sollte in doppelten Anführungszeichen innerhalb der eckigen Klammern stehen. Hier ist eine Fortsetzung des vorherigen Beispiels:

Was ist, wenn Sie mit verschachtelten Array-Elementen arbeiten? In diesem Fall müssen Sie die Nummer des Elements im Array aufrufen. Nehmen Sie das folgende Beispiel:

Angenommen, wir möchten auf den String facebook zugreifen. So verwenden wir die Punktnotation, um auf dieses Element im Array über seine Nummer zuzugreifen:

Denken Sie daran, für jedes verschachtelte Element einen zusätzlichen Punkt hinzuzufügen.

Mit JSON verwendete Funktionen

Als Nächstes betrachten wir einige Funktionen, die Sie mit JSON verwenden können. Datenübertragung und -speicherung werden recht einfach, wenn Sie JSON von einem Objekt in einen String oder von einem String in ein Objekt konvertieren können. Wir werden untersuchen, wie Sie JSON auf zwei verschiedene Arten in einen String umwandeln (stringify) und parsen können:

• JSON.stringify()

Strings eignen sich besser, wenn Daten auf leichtgewichtige Weise übertragen werden sollen. Aus diesem Grund werden sie verwendet, um Daten zu speichern und vom Client zum Server zu übertragen. Betrachten Sie das folgende Beispiel. Nehmen wir an, Sie erfassen die Einstellungen des Benutzers auf einem Computer. Sie müssen diese Informationen an Ihren Server senden. Zu diesem Zweck würden Sie einen String verwenden. Anschließend können Sie ihn mit JSON.parse() wieder zurückkonvertieren, um ihn zu lesen und damit zu arbeiten.

Die Funktion, die wir hier hervorheben möchten, ist JSON.stringify(). Diese Funktion konvertiert ein JSON-Objekt in einen JSON-String. In diesem Beispiel weisen wir unser Objekt der Variablen obj zu. Wir konvertieren es mit der  JSON.stringify()-Funktion. Dazu übergeben wir obj an die Funktion und weisen den String dann der Variablen s wie folgt zu:

Das Aufrufen der Variablen s liefert Ihnen das JSON als String:

• JSON.parse()

Verständlicherweise erfüllt JSON.parse() die entgegengesetzte Funktion. Nachdem Sie die Daten übertragen haben, müssen Sie sie wieder in ein JSON-Objekt konvertieren, um damit arbeiten zu können. Eine Möglichkeit besteht darin, die Funktion eval() zu verwenden. Dieser Ansatz ist jedoch nicht besonders sicher. Aus diesem Grund bevorzugen wir die Funktion JSON.parse().

Betrachten wir das vorherige Beispiel noch einmal. Wir übergeben den String s an die Funktion JSON.parse(). Dann weisen wir ihm eine neue Variable zu:

Unser neues Objekt ist nun o. Es entspricht obj. Mehr Einblick erhalten wir, wenn wir JSON.parse() in einer HTML-Datei wie dieser betrachten:

Hier können Sie tatsächlich sehen, wie wir den String s in ein abrufbares Objekt umgewandelt haben. Somit ist JSON.parse() eine sichere Option zur Konvertierung von JSON-Strings in Objekte.

Fazit

Wie wir in diesem Tutorial gesehen haben, hat JSON viele Implementierungen in JavaScript. Es ist besonders nützlich, da es mit fast jeder Programmiersprache verwendet werden kann, was es zur naheliegenden Option macht. Darüber hinaus haben wir nur an der Oberfläche gekratzt. Es gibt noch so viel mehr, was Sie mit JSON tun können. Es wird bereits in APIs unterstützt.

Hier sind weitere Ressourcen von unserem Blog, die Ihnen beim Programmieren mit JavaScript helfen werden:

• Erfahren Sie, wie Prototypen und Vererbung in JavaScript funktionieren.
• Erkunden Sie im Detail, wie Sie JavaScript zu HTML hinzufügen.
• Wenn Sie Ihre eigene Webanwendung erstellen, werfen Sie einen Blick auf unseren Leitfaden zur Auswahl des besten Server-Setups.

Viel Spaß beim Programmieren!