JSON in JavaScript verwenden

JSON (ein Akronym für „JavaScript Object Notation“) ist ein kompaktes Datenformat, das oft für den Datentransfer zwischen Webanwendungen genutzt wird.

Im JSON-Format verfasste Datensätze sind fast identisch mit der Objekt-Notation in JavaScript. Der einzige offensichtliche Unterschied ist der, dass die Schlüssel (keys) in JSON mit doppelten Anführungszeichen gekennzeichnet werden müssen.

Ein Objekt in JavaScript:

// Objekt in JavaScript
var einObjekt = {
    einBool: true,
    einString: "Hallo!",
    eineZahl: 42,
    einArray: [0, 1, "zwei", {Zahl: 4}]
};

Und hier dasselbe Objekt als JSON:

{
    "einBool": true,
    "einString": "Hallo!",
    "eineZahl": 42,
    "einArray": [0, 1, "zwei", {"Zahl": 4}]
}

Ganz wichtig: Abschließende Kommata dürfen in JSON-Datensätzen nur nach Werten gesetzt werden, auf die noch weitere Schlüssel oder Werte folgen. Wird diese Regel nicht eingehalten, kann es zu Fehlern beim Umwandeln der Daten kommen. Folgender Datensatz würde aufgrund des rot markierten Kommas einen Fehler verursachen:

{
    "einBool": true,
    "einString": "Hallo!",
}

JSON-Daten in JavaScript verwenden

Die Verwendung von Daten im JSON-Format ist in JavaScript grundsätzlich sehr einfach. In der Regel liegen die JSON-codierten Daten, nachdem sie beispielsweise von einem Server empfangen wurden dem JavaScript-Programm als String vor. Um diesen String in ein gültiges Objekt umzuwandeln, reicht ein einfacher Aufruf der Funktion JSON.parse.

var jsonString = '{"einBool": true,"einString": "Hallo!","eineZahl": 42,"einArray": [0, 1, "zwei", {"Zahl": 4}]}';
 
var meinObjekt = JSON.parse(jsonString); 

Der parse-Funktion kann optional eine „Reviver“-Funktion übergeben werden. Diese ermöglicht es, vor der Rückgabe des Objekts einzelne Schlüssel oder Werte zu verändern. Beim folgenden Parse-Vorgang werden zum Beispiel alle Werte mit dem Schlüssel „einBool“ negiert.

var meinObjekt = JSON.parse(jsonString, function (schluessel, wert) {
    if (schluessel === 'einBool') {
        return !wert;
    }
    return wert;
});

Das globale JSON-Objekt steht in jedem moderneren Browser zur Verfügung (http://caniuse.com/#feat=json).

Das Gegenstück zu JSON.parse ist die Funktion JSON.stringify, die ein beliebiges JavaScript-Objekt in einen JSON-String verwandelt.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Ajax: Andere Formen von Ajax - HTMLWorld schrieb am 18.04.2015:

[…] Mehr zum Thema JSON in JavaScript […]

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project