Was ist JSON?

JSON, oder JavaScript Object Notation, ist ein standardisiertes textbasiertes Format, das zur Darstellung strukturierter Daten entworfen wurde. Es ist besonders nützlich für den Datenaustausch zwischen einem Server und einer Webanwendung, beispielsweise beim Versenden von Daten von einem Server an einen Client, um diese auf einer Webseite anzuzeigen.

Die Grundlagen von JSON

JSON ist ein leichtgewichtiges Datenformat, das auf der Syntax von JavaScript-Objekten basiert. Obwohl es stark an die JavaScript-Syntax erinnert, ist es als eigenständiges Format verwendbar. JSON ist leicht verständlich, selbstbeschreibend und kann in den meisten Programmiersprachen verarbeitet werden.

Ein einfaches Beispiel für JSON

Hier sehen Sie ein Beispiel für die JSON-Darstellung von Mitarbeiterdaten:

    {
        "employees": [
            {"firstName": "John", "lastName": "Doe"},
            {"firstName": "Anna", "lastName": "Smith"},
            {"firstName": "Peter", "lastName": "Jones"}
        ]
    }
    

JSON-Syntaxregeln

• Daten werden in Name-Wert-Paaren dargestellt.
• Werte sind durch Kommas getrennt.
• Objekte sind in geschweifte Klammern ({}) eingeschlossen.
• Arrays sind in eckige Klammern ([]) eingeschlossen.

Name-Wert-Paare

Die Struktur von JSON-Daten besteht aus Name-Wert-Paaren, ähnlich wie bei den Eigenschaften von JavaScript-Objekten. Ein Beispiel für ein Name-Wert-Paar ist:

    "firstName": "John"
    

Beachten Sie, dass die Namen in doppelten Anführungszeichen stehen müssen, während dies in JavaScript nicht erforderlich ist.

JSON-Objekte und -Arrays

JSON-Objekte sind in geschweiften Klammern geschrieben und können mehrere Name-Wert-Paare enthalten:

    {"firstName": "John", "lastName": "Doe"}
    

JSON-Arrays sind in eckigen Klammern geschrieben und können Objekte enthalten:

    "employees": [
        {"firstName": "John", "lastName": "Doe"},
        {"firstName": "Anna", "lastName": "Smith"},
        {"firstName": "Peter", "lastName": "Jones"}
    ]
    

JSON in JavaScript verwenden

Ein häufiges Szenario für die Verwendung von JSON ist das Lesen von Daten von einem Webserver und das Anzeigen dieser Daten auf einer Webseite. Dies kann einfach mit einer Zeichenkette demonstriert werden, die JSON-Syntax enthält.

Beispiel für die Umwandlung von JSON in ein JavaScript-Objekt

Angenommen, Sie haben eine JavaScript-Zeichenkette mit JSON-Syntax:

    let text = '{ "employees": [' +
        '{ "firstName": "John", "lastName": "Doe" },' +
        '{ "firstName": "Anna", "lastName": "Smith" },' +
        '{ "firstName": "Peter", "lastName": "Jones" } ]}';
    

Sie können die eingebaute Funktion JSON.parse() verwenden, um die Zeichenkette in ein JavaScript-Objekt zu konvertieren:

    const obj = JSON.parse(text);
    

Beispiel zur Verwendung des umgewandelten Objekts

Jetzt können Sie das neue JavaScript-Objekt in Ihrer Webseite verwenden:

Fehlerbehandlung beim Parsen von JSON

Beim Parsen von JSON sollten Sie sicherstellen, dass die Zeichenkette im richtigen JSON-Format vorliegt, da Sie andernfalls eine Syntaxfehlermeldung erhalten können. Beispielsweise:

    JSON.parse("{'foo': 1}"); // SyntaxError: Unexpected token '
    

Datumswerte in JSON

Datum-Objekte sind in JSON nicht zulässig. Wenn Sie ein Datum einfügen müssen, sollten Sie es als Zeichenkette schreiben und später in ein Datum-Objekt umwandeln:

    const text = '{"name": "John", "birth": "1986-12-14"}';
    const obj = JSON.parse(text);
    obj.birth = new Date(obj.birth);
    

JSON.stringify() – Umwandlung von Objekten in JSON

Umgekehrt können Sie die Methode JSON.stringify() verwenden, um ein JavaScript-Objekt in eine JSON-Zeichenkette umzuwandeln:

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

Zusammenfassung

In diesem Artikel haben wir Ihnen einen Überblick über JSON in JavaScript gegeben, einschließlich der Erstellung und des Parsens von JSON, sowie des Zugriffs auf die darin enthaltenen Daten. JSON ist ein wesentliches Werkzeug für die Arbeit mit Daten in modernen Webanwendungen.

Um mehr über die Grundlagen der objektorientierten Programmierung zu erfahren, lesen Sie diesen Artikel.