JSON.parse()

Det vanliga användningsområdet för JSON är dataöverföring med webbservrar.

När data tas emot från en webbserver är data alltid en sträng.

Genom JSON.parse() Analysera data som kommer att bli JavaScript-objekt.

Exempel – Parse JSON

Tänk dig att vi får detta textblock från en webbserver:

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

Använd JavaScript-funktionen JSON.parse() Konvertera texten till ett JavaScript-objekt:

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

Se till att denna text är skriven i JSON-format, annars kommer det att uppstå syntaxfel.

Använd JavaScript-objekt på din sida:

Exempel

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

Prova själv

JSON från servern

Du kan begära JSON från servern genom att använda AJAX-anrop.

Så länge serverns respons är skriven i JSON-format, kan du解析字符串 till ett JavaScript-objekt.

Exempel

Använd XMLHttpRequest för att hämta data från servern:

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();

Prova själv

visa json_demo.txt

som en JSON-array

när du använder JSON som härleds från en array JSON.parse() därefter kommer denna metod att returnera en JavaScript-array, inte ett JavaScript-objekt.

Exempel

JSON som returneras från servern är en 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();

Prova själv

Se json_demo_array.txt

Undantag

Parsera datum

Datumobjekt är inte tillåtna i JSON.

Om du behöver inkludera ett datum, skriv det som en sträng.

Efter det kan du konvertera tillbaka till datumobjekt:

Exempel

Konvertera sträng till 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;

Prova själv

eller du kan använda JSON.parse() Funktionens andra parameter kallas reviver.

denna reviver Parametern är en funktion som kontrollerar varje egenskap innan den returnerar värdet.

Exempel

Konvertera sträng till datum, använda 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;

Prova själv

Parsera funktion

Funktioner är inte tillåtna i JSON.

Om du behöver inkludera en funktion, skriv den som en sträng.

Senare kan du konvertera tillbaka till funktion:

Exempel

Konvertera sträng till funktion:

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();

Prova själv

Du bör undvika att använda funktioner i JSON, eftersom de förlorar sitt omgivande sammanhang och du måste använda eval() Konvertera tillbaka till funktioner.

Webbläsarstöd

alla vanliga webbläsare och den senaste ECMAScript (JavaScript)-standarden inkluderar JSON.parse() Funktion:

Numrerna i följande tabell anger fullständig stöd JSON.parse() Första webbläsarversionen för funktionen:

Ja 8.0 3.5 4.0 10.0

För äldre webbläsare är följande JavaScript-bibliotek tillgängliga på följande adress:

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