JSON.parse()

JSON wird normalerweise verwendet, um Daten mit dem Server auszutauschen.

Beim Empfangen von Serverdaten handelt es sich im Allgemeinen um eine Zeichenkette.

Wir können die Methode JSON.parse() verwenden, um die Daten in ein JavaScript-Objekt umzuwandeln.

Syntax

JSON.parse(text[, reviver])

Parameterbeschreibung:

  • text:Erforderlich, ein gültiger JSON-String.
  • reviver:Optional, eine Funktion, die das Ergebnis umwandelt und für jedes Mitglied des Objekts aufgerufen wird.

JSON-Parsing-Beispiel

Zum Beispiel haben wir die folgenden Daten vom Server erhalten:

{ "name":"example", "alexa":10000, "site":"www.example.com" }

Wir verwenden die Methode JSON.parse(), um die obigen Daten zu verarbeiten und sie in ein JavaScript-Objekt umzuwandeln:

var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }');

Stellen Sie vor dem Parsen sicher, dass Ihre Daten im Standard-JSON-Format vorliegen, da sonst ein Fehler auftreten kann.

Sie können unser Online-Tool zur Überprüfung verwenden:https://www.jyshare.com/front-end/53。

Nach Abschluss des Parsens können wir die JSON-Daten auf der Webseite verwenden:

Beispiel

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>

Selbst ausprobieren »

Empfangen von JSON-Daten vom Server

Wir können AJAX verwenden, um JSON-Daten vom Server anzufordern und sie in ein JavaScript-Objekt zu parsen.

Beispiel

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", "/try/ajax/json_demo.txt", true); xmlhttp.send();

Selbst ausprobieren »

Serverdaten anzeigen:

Empfangen von JSON-Array-Daten vom Server

Wenn die vom Server empfangenen Daten ein JSON-Array sind, konvertiert JSON.parse sie in ein JavaScript-Array:

Beispiel

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

Selbst ausprobieren »

Serverdaten anzeigen:

Ausnahmen

Daten parsen

JSON kann keine Date-Objekte speichern.

Wenn Sie ein Date-Objekt speichern müssen, müssen Sie es in einen String umwandeln.

Später wandeln Sie den String wieder in ein Date-Objekt um.

Beispiel

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "Erstellungsdatum:" + obj.initDate;

Selbst ausprobieren »

Wir können den zweiten Parameter von JSON.parse aktivieren, reviver, eine Funktion, die das Ergebnis transformiert und für jedes Element des Objekts aufgerufen wird.

Beispiel

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "Erstellungsdatum:" + obj.initDate;

Selbst ausprobieren »

Parsing-Funktionen

JSON erlaubt keine Funktionen, aber man kann eine Funktion als Zeichenfolge speichern und die Zeichenfolge später wieder in eine Funktion umwandeln.

Beispiel

var text = '{ "name":"Example", "alexa":"function () {return 10000;}", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + "Alexa-Ranking:" + obj.alexa();

Selbst ausprobieren »

Es wird nicht empfohlen, Funktionen in JSON zu verwenden.

Browser-Unterstützung

Alle wichtigen Browser unterstützen die Funktion JSON.parse():

Unterstützt 8.0 3.5 4.0 10.0

Ältere Browser können zur Unterstützung Drittanbieter-Bibliotheken verwenden:https://github.com/douglascrockford/JSON-js

Andere Erweiterungen