JSON.parse()

Der Standardanwendungsbereich von JSON ist die Datenübertragung zwischen Webservern.

Beim Empfang von Daten vom Webserver sind die Daten immer Zeichenfolgen.

Durch JSON.parse() Analysieren Sie Daten, die JavaScript-Objekte werden.

Beispiel – JSON analysieren

Stellen Sie sich vor, wir haben diesen Text vom Webserver empfangen:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

Verwenden Sie die JavaScript-Funktion JSON.parse() Konvertieren Sie Text in JavaScript-Objekt:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Stellen Sie sicher, dass dieser Text im JSON-Format geschrieben ist,否则会出现语法错误。

Verwenden Sie auf Ihrer Seite JavaScript-Objekte:

Beispiel

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Selbst ausprobieren

Von Server empfangenes JSON

Sie können JSON durch Verwendung von AJAX-Anfragen vom Server anfordern.

Sobald die Antwort des Servers im JSON-Format geschrieben ist, können Sie die Zeichenfolge in ein JavaScript-Objekt umwandeln.

Beispiel

Verwenden Sie XMLHttpRequest, um Daten vom Server zu erhalten:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Selbst ausprobieren

Betrachten Sie json_demo.txt

als JSON-Array

wenn JSON aus einem Array verwendet wird JSON.parse() dieser Methode wird eine JavaScript-Array zurückgegeben, nicht ein JavaScript-Objekt.

Beispiel

Von dem Server zurückgegebene JSON ist ein Array:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Selbst ausprobieren

Siehe json_demo_array.txt

Ausnahme

Datum auflösen

Datumobjekte sind in JSON nicht erlaubt.

Wenn Sie ein Datum enthalten möchten, schreiben Sie es als String.

Später können Sie es in ein Datumobjekt umwandeln:

Beispiel

Konvertieren Sie den String in ein Datum:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Selbst ausprobieren

oder Sie können bereits JSON.parse() Der zweite Parameter der Funktion wird reviver.

dieser reviver Der Parameter ist eine Funktion, die vor dem Rückgabewert jeden Attribut überprüft.

Beispiel

Konvertieren Sie den String in ein Datum, verwenden Sie die reviver-Funktion:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   });
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Selbst ausprobieren

Funktion auflösen

Funktionen sind in JSON nicht erlaubt.

Wenn Sie eine Funktion enthalten möchten, schreiben Sie sie als String.

Später können Sie ihn wieder in eine Funktion umwandeln:

Beispiel

Denken Sie daran, den String in eine Funktion zu konvertieren:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Selbst ausprobieren

Sie sollten Funktionen in JSON vermeiden, da sie ihren Kontext verlieren und Sie müssen auch eval() Konvertieren Sie sie in Funktionen zurück.

Browser-Unterstützung

alle gängigen Browser sowie die neuesten ECMAScript (JavaScript)-Standards enthalten JSON.parse() Funktion:

Die in der folgenden Tabelle angegebenen Zahlen spezifizieren die vollständige Unterstützung JSON.parse() Erste Browser-Version der Funktion:

Ja 8.0 3.5 4.0 10.0

Für ältere Browser sind die folgenden JavaScript-Bibliotheken verfügbar:

https://github.com/douglascrockford/JSON-js