JSON.parse()

De gebruikelijke toepassing van JSON is het overbrengen van gegevens tussen webserver en client.

Bij het ontvangen van gegevens van de webserver zijn gegevens altijd strings.

door JSON.parse() Parseer de gegevens, deze worden JavaScript-objecten.

Voorbeeld - JSON parseren

Denk eens na over dit tekststuk dat we van de webserver hebben ontvangen:

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

Gebruik de JavaScript-functie JSON.parse() Converteer tekst naar een JavaScript-object:

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

Zorg ervoor dat deze tekst in JSON-formaat is geschreven, anders kan er een syntaxisfout optreden.

Gebruik JavaScript-objecten in uw pagina:

Voorbeeld

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

Probeer het zelf uit

JSON van de server

Je kunt JSON aanvragen van de server met behulp van AJAX-verzoeken.

Zolang de reactie van de server in JSON-formaat is geschreven, kun je de string ontleden tot een JavaScript-object.

Voorbeeld

Gebruik XMLHttpRequest om gegevens van de server te verkrijgen:

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

Probeer het zelf uit

Bekijk json_demo.txt

als JSON-array

bij het gebruiken van JSON afgeleid van een array JSON.parse() naar voren, deze methode zal een JavaScript-array retourneren in plaats van een JavaScript-object.

Voorbeeld

De JSON die van de server wordt geretourneerd is een 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();

Probeer het zelf uit

Bekijk json_demo_array.txt

Uitzondering

Datum ontleden

Datumobjecten zijn niet toegestaan in JSON.

Als u data wilt opnemen, schrijf het als een string.

Daarna kunt u het weer naar een datumobject converteren:

Voorbeeld

String naar datum converteren:

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;

Probeer het zelf uit

of u kunt ook JSON.parse() De tweede parameter van de functie, wordt genoemd reviver.

deze reviver Het argument is een functie, die elke eigenschap controleert voordat de waarde wordt geretourneerd.

Voorbeeld

String naar datum converteren, gebruik de reviver functie:

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;

Probeer het zelf uit

Functie ontleden

Functions zijn niet toegestaan in JSON.

Als u functies wilt opnemen, schrijf het als een string.

U kunt het later weer naar een functie converteren:

Voorbeeld

String naar functie converteren:

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

Probeer het zelf uit

U moet functies vermijden in JSON, omdat functies hun scope verliezen en u moet ook eval() Zet ze om naar functies.

Browserondersteuning

Alle主流 browsers en de nieuwste ECMAScript (JavaScript) standaarden bevatten JSON.parse() Functie:

De cijfers in onderstaande tabel specificeren de volledige ondersteuning JSON.parse() Eerste browserversie van de functie:

Ja 8.0 3.5 4.0 10.0

Voor oudere browsers zijn de volgende JavaScript-bibliotheken beschikbaar op de volgende adres:

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