JSON/parse

Daten werden in JSON als Zeichenkette gespeichert. Um sie in JavaScript weiterzuverarbeiten, müssen sie mit JSON.parse() umgewandelt werden, sodass aus dem JSON-String ein JavaScript-Objekt erstellt wird.

Syntax

JSON.parse(text[, reviver])

Parameter:

• text: String, der als JSON geparst werden soll.
• reviver: (optional) Der reviver ist eine Funktion, mit der man das Parsing-Ergebnis umwandeln kann, bevor es zurückgegeben wird.

Rückgabewert ist das konvertierte Objekt.

Reviver-Funktion

JSON.parse rekonstruiert eigenständig einen JavaScript-Wert aus dem übergebenen JSON-String. Dabei werden Array- und Objektliterale, Zahlen, boolesche Werte und null automatisch konvertiert. Das Ergebnis ist, je nach JSON-String, ein Baum aus skalaren (Zahl, Boolean oder null) oder zusammengesetzten (Array, Objekt) Werten. Dieser Baum wird nun automatisch durchlaufen und für jeden darin enthaltenen Wert die Revive-Funktion aufgerufen. Für zusammengesetzte Werte gilt, dass der Reviver zuerst für die enthaltenen Werte und dann für das Array bzw. Objekt selber aufgerufen wird.

Bei jedem Aufruf erhält die Revive-Funktion zwei Parameter: Einen Namen und den zugehörigen Wert. Bei Objekten ist das der Name der zu konvertierenden Eigenschaft und bei Arrays der aktuelle Index (in einen String konvertiert). Die Revive-Funktion wird auch für den Wurzelwert des Wertebaumes aufgerufen, mit leerem Namen.

Bei verschachtelten Objekten kann der Name nicht hinreichend eindeutig sein, da die Reviver-Funktion nur den Eigenschaftsnamen erhält und nicht die Eigenschaftsnamen der übergeordneten Objekte. In diesem Fall sollte man auf eine Revive-Funktion verzichten und erforderliche Übersetzungen in einer nachgelagerten Verarbeitung durchführen.

Die Rückgabe der Revive-Funktion kann undefined sein, dann wird diese Eigenschaft aus dem Wertebaum gelöscht. Alle anderen Rückgaben werden als neuer Wert für diese Eigenschaft gespeichert.

Anwendungsbeispiele

Deserialisierung eines einfachen Objekts

Beispiel So sieht's aus

var obj = JSON.parse('{ "name": "Georg", "alter": 47, "verheiratet": false, "beruf": null}');

document.querySelector('output').innerText = obj.name + ", " + obj.alter;

Im Beispiel wird der (verkürzte) String aus dem Notationsbeispiel der Methode JSON.parse() als Parameter übergeben und damit in ein JavaScript-Objekt umgewandelt. Das Objekt wird in der Variablen obj gespeichert.
Anschließend werden mit obj.name bzw. obj.alter Name und Alter ermittelt und mit querySelector ausgegeben.
Die Eigenschaftswerte 47, false und null sind im JSON-String nicht in Anführungszeichen gesetzt. JSON.parse akzeptiert diese Typen und speichert sie Zahl bzw. als booleschen Wert oder null.

Datum oder Zeit im JSON-String

Es gibt kein standardisiertes Format, in dem Datums- oder Zeitangaben in einem JSON-String gespeichert werden. Dementsprechend führt JSON.parse auch keine automatische Konvertierung in ein Date-Objekt durch. Es ist Sache des Anwenders, hier eine eigene Konvertierung vorzunehmen. Dafür gibt es zwei Möglichkeiten: eine handprogrammierte Nachverarbeitung des von JSON.parse zurückgegebenen Objekts, oder die Verwendung des revive-Callback.

Manuelle Nachverarbeitung

var jsonString = '[ { "name": "Georg", "geburtsdatum": "1970-04-01", "verheiratet": false, "beruf": null} ]';
var obj = JSON.parse(jsonString);

if (obj.length > 0) {
   obj.forEach(function(zeile) {
      zeile.geburtsdatum = new Date(zeile.geburtsdatum);
   });
   document.querySelector('output').innerText = obj[0].name + ", " + obj[0].geburtsdatum;
}

Hier wurde der JSON-String etwas erweitert und repräsentiert nun ein Array von Objekten. Das ist eine durchaus praxisnahe Sache, weil viele AJAX-Dienste ein Array von gefundenen Objekten zurückgeben.

Nicht ganz praxisnah ist der Verzicht auf eine genauere Prüfung der Rückgabe von JSON.parse; hier müsste eigentlich noch sichergestellt werden, dass ein Array zurückkommt.
Das eigentliche parsen des JSON-String erfolgt wie im vorherigen Beispiel, nur dass jetzt kein Alter vorhanden ist, sondern ein Geburtdatum. Das Datum liegt mangels Alternative als String-Eigenschaft vor und erscheint deswegen im Ergebnis von JSON.parse ebenfalls als String.

Dieses Array wird als Nachverarbeitung mit der Array-Methode foreach durchlaufen und in jeder Zeile der Wert der geburtsdatum-Eigenschaft durch ein Date ersetzt. Im Fall des Datumsformats YYYY-MM-DD kann der Date-Konstruktor diese Konvertierung ausführen.

Mit einer Revive-Funktion kann man auf die Nachverarbeitung verzichten:

Verwendung einer Revive-Funktion

var jsonString = '[ { "name": "Georg", "geburtsdatum": "1970-04-01", "verheiratet": false, "beruf": null} ]';
var obj = JSON.parse(jsonString, function(name, wert) {
   if (name === "geburtsdatum")
      wert = new Date(wert);
   return wert;
});
if (obj.length > 0) {
   document.querySelector('output').innerText = obj.name + ", " + obj.geburtsdatum;
}

Die Revive-Funktion prüft bei jedem Aufruf, ob sie für die geburtsdatum-Eigenschaft aufgerufen wird, und ersetzt den Wert dann durch ein Date-Objekt. Die separater Nachverarbeitung entfällt, allerdings wird die Revive-Funktion für jede Eigenschaft des Objekts aufgerufen, was Laufzeitnachteile haben kann.

Hinweise

fehlerhaftes JSON

Wenn die Daten in fehlerhafter Notation geschrieben werden, wirft JSON.parse() einen Ausnahmefehler ('Syntax error'); d. h. es wird abgebrochen. Richtige Teile des Strings werden nicht geparst.

fehlerhafte Schreibeweise führt zum Abbruch

// String wird mit Komma abgeschlossen-> Ausnahmefehler
JSON.parse('[1, 2, 3, 4, ]');

Empfehlung: Überprüfen Sie Ihre JSON-Daten mit einem JSON Validator.

Funktionen in JSON

Beachten Sie: Eine wichtige Einschränkung besteht: Das zu parsende Objekt darf keine Funktionen enthalten.

Weblinks

• ECMA: JSON.parse
• MDN: JSON.parse