JSON.parse()

L'utilisation habituelle du JSON est de transmettre des données entre le serveur web et le client.

Lorsque vous recevez des données du serveur web, les données sont toujours des chaînes.

à travers JSON.parse() Analyser les données, qui deviendront des objets JavaScript.

Exemple - Analyse JSON

Imaginez que nous recevons ce texte du serveur web :

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

Utilisez la fonction JavaScript JSON.parse() Convertir le texte en objet JavaScript :

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

Assurez-vous que ce texte est écrit en format JSON, sinon il y aura des erreurs de syntaxe.

Utilisez un objet JavaScript sur votre page :

Exemple

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

Essayez-le vous-même

JSON provenant du serveur

Vous pouvez demander du JSON au serveur en utilisant des requêtes AJAX.

Tant que la réponse du serveur est écrite en format JSON, vous pouvez解析 la chaîne en objet JavaScript.

Exemple

Utilisez XMLHttpRequest pour obtenir des données du serveur :

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

Essayez-le vous-même

Voir json_demo.txt

comme tableau JSON

lors de l'utilisation du JSON dérivé d'un tableau JSON.parse() Après cela, cette méthode renverra un tableau JavaScript, plutôt qu'un objet JavaScript.

Exemple

Le JSON renvoyé par le serveur est un tableau :

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

Essayez-le vous-même

Voir json_demo_array.txt

Exception

Analyser la date

Il n'est pas autorisé de contenir des objets date dans JSON.

Si vous devez inclure une date, écrivez-la sous forme de chaîne.

Ensuite, vous pouvez la convertir en objet date :

Exemple

Convertir une chaîne en date :

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

Essayez-le vous-même

ou vous pouvez déjà utiliser JSON.parse() Le deuxième paramètre de la fonction, appelé reviver.

ceci reviver Le paramètre est une fonction, qui vérifie chaque propriété avant de renvoyer la valeur.

Exemple

Convertir une chaîne en date, en utilisant la fonction 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;

Essayez-le vous-même

Analyser la fonction

Il n'est pas autorisé de contenir des fonctions dans JSON.

Si vous devez inclure une fonction, écrivez-la sous forme de chaîne.

Vous pouvez ensuite la convertir en fonction :

Exemple

Convertir une chaîne en fonction :

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

Essayez-le vous-même

Vous devriez éviter d'utiliser des fonctions dans JSON, les fonctions perdent leur portée et vous devez également utiliser eval() Retournez-les en fonction.

Support du navigateur

Tous les navigateurs populaires et les normes ECMAScript (JavaScript) les plus récentes incluent JSON.parse() Fonction :

Les nombres dans le tableau suivant indiquent le soutien complet JSON.parse() La première version du navigateur de la fonction :

Oui 8.0 3.5 4.0 10.0

Pour les navigateurs plus anciens, les bibliothèques JavaScript suivantes sont disponibles à l'adresse suivante :

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