Kontakt aufnehmen
Wir stellen ein: PHP-Entwickler (m/w/d) Key Account Manager (m/w/d)

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.

Kommentare

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

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

Über uns

Stefan Wienströer

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

Karriere bei a coding project - Wir freuen uns auf dich!

Alle unsere Stellen sind Remote oder an unseren Standorten in Münster und Wuppertal verfügbar:

// Warum Du Dich für uns entscheiden solltest

  • Regelmäßig neue Projekte, die Du von Grund an mit planen und aufbauen kannst
  • Arbeit in einem wachsenden IT-Unternehmen
  • So viel Home-Office wie Du möchtest - Und einen Arbeitsplatz in unserem Büro in Münster
  • Wöchentliche Vorträge: Jeden Freitag hält ein Mitarbeiter einen Vortrag über ein Fachthema seiner Wahl
Karriere

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern