JSON.parse()

L'uso comune del JSON è il trasferimento di dati tra il server web e il client.

Quando si ricevono dati dal server web, i dati sono sempre stringhe.

Attraverso JSON.parse() Analizza i dati, che diventeranno oggetti JavaScript.

Esempio - Analisi JSON

Immaginiamo di ricevere questo testo dal server web:

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

Utilizza la funzione JavaScript JSON.parse() Converti il testo in un oggetto JavaScript:

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

Assicurati che questo testo sia scritto in formato JSON, altrimenti verranno generati errori di sintassi.

Utilizza oggetti JavaScript nella tua pagina:

Esempio

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

Prova te stesso

JSON proveniente dal server

Puoi richiedere JSON dal server utilizzando richieste AJAX.

Finché la risposta del server è scritta in formato JSON, è possibile analizzare la stringa in un oggetto JavaScript.

Esempio

Utilizzare XMLHttpRequest per ottenere dati dal server:

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 te stesso

Vedere json_demo.txt

Come array di JSON

Quando si utilizza JSON derivato da un array JSON.parse() Dopo di che, questo metodo restituirà un array JavaScript, non un oggetto JavaScript.

Esempio

Il JSON restituito dal server è un 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 te stesso

Vedi json_demo_array.txt

Eccezione

Analisi delle date

Non è permesso includere oggetti data nel JSON.

Se vuoi includere una data, scrivila come stringa.

Poi puoi convertirlo di nuovo in un oggetto data:

Esempio

Converti una stringa in una data:

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 te stesso

o puoi anche usare JSON.parse() Il secondo parametro della funzione, chiamato reviver.

Questo reviver Il parametro è una funzione, che verifica ogni proprietà prima di restituire il valore.

Esempio

Converti una stringa in una data, utilizzando la funzione reviver:

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 te stesso

Analisi delle funzioni

Non è permesso includere funzioni nel JSON.

Se vuoi includere una funzione, scrivila come stringa.

Puoi convertirlo di nuovo in una funzione più tardi:

Esempio

Converti una stringa in una funzione:

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 te stesso

Dovresti evitare di utilizzare funzioni in JSON, le funzioni perderanno il loro contesto e avrai bisogno di usare eval() Ritornare a funzioni.

Supporto del browser

Tutti i browser mainstream e lo standard ECMAScript (JavaScript) più recente includono JSON.parse() Metodo:

I numeri nella tabella sottostante specificano il supporto completo JSON.parse() La prima versione del browser del metodo:

Sì 8.0 3.5 4.0 10.0

Per i browser più vecchi, sono disponibili le seguenti librerie JavaScript agli indirizzi seguenti:

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