JSON.parse()

JSON:n yleisin käyttötarkoitus on tiedonsiirto web-palvelimien välillä.

Kun vastaanotat tietoja web-palvelimelta, data on aina merkkijono.

kautta JSON.parse() Tulkitse data, joka tulee olemaan JavaScript-objekti.

Esimerkki – JSON:n解析ointi

Kuvittele, että saamme tämän tekstin web-palvelimelta:

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

Käytä JavaScript-funktiota JSON.parse() Muunna teksti JavaScript-objektiksi:

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

Varmista, että tämä teksti on kirjoitettu JSON-muodossa, muuten syntyy syntaksivirhe.

Käytä JavaScript-objektia sivullasi:

Esimerkki

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

Kokeile itse

Palvelimelta tuleva JSON

Voit pyytää JSON:ia palvelimelta käyttämällä AJAX-pyynnön.

kun palvelimen vastaus on JSON-muodossa kirjoitettu, voit parseriaa merkkijonon JavaScript-objektiksi.

Esimerkki

Hanki tietoja palvelimelta XMLHttpRequest:n avulla:

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

Kokeile itse

tarkastele json_demo.txt

JSON:nä taulukko

kun käytät JSON:ia, joka on johdettu taulukosta JSON.parse() tämän jälkeen, tämä metodi palauttaa JavaScript-taulukon, ei JavaScript-objektia.

Esimerkki

JSON, joka palautetaan palvelimelta, on taulukko:

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

Kokeile itse

Katso json_demo_array.txt

Poikkeus

Päivämäärän analysointi

JSON ei salli päivämääräobjekteja.

Jos haluat sisällyttää päivämäärän, kirjoita se merkkijonona.

Voit myöhemmin muuntaa sen takaisin päivämääräobjektiksi:

Esimerkki

Muunna merkkijono päivämääräksi:

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

Kokeile itse

tai voit käyttää JSON.parse() Funktion toinen parametri, tunnettu reviver.

tämä reviver Parametri on funktio, joka tarkistaa jokaisen ominaisuuden palautusarvoa ennen kuin se palauttaa.

Esimerkki

Muunna merkkijono päivämääräksi käyttäen reviver-funktiota:

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;

Kokeile itse

Funktion analysointi

JSON ei salli funktioita.

Jos haluat sisällyttää funktion, kirjoita se merkkijonona.

Voit myöhemmin muuntaa sen takaisin funktioksi:

Esimerkki

Muunna merkkijono funktioksi:

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

Kokeile itse

Vältä käyttämästä funktioita JSONissa, koska ne menettävät kontekstin ja sinun täytyy käyttää eval() Muunna ne takaisin funktioiksi.

Selaimen tuki

Kaikki suosituimmat selaimet sekä uusimmat ECMAScript (JavaScript)-standardit sisältävät JSON.parse() Funktiot:

Seuraavassa taulukossa olevat numerot määrittelevät täysin tuetut JSON.parse() Funktion ensimmäinen selainversio:

Kyllä 8.0 3.5 4.0 10.0

Vanhemmille selaimille seuraavassa osoitteessa olevat JavaScript-kirjastot ovat saatavilla:

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