JSON.parse()

JSON est généralement utilisé pour échanger des données avec le serveur.

Lors de la réception de données du serveur, il s'agit généralement d'une chaîne de caractères.

Nous pouvons utiliser la méthode JSON.parse() pour convertir les données en un objet JavaScript.

Syntaxe

JSON.parse(text[, reviver])

Description des paramètres :

  • text:Requis, une chaîne JSON valide.
  • reviver:Facultatif, une fonction qui transforme le résultat, appelée pour chaque membre de l'objet.

Exemple d'analyse JSON

Par exemple, nous avons reçu les données suivantes du serveur :

{ "name":"example", "alexa":10000, "site":"www.example.com" }

Nous utilisons la méthode JSON.parse() pour traiter les données ci-dessus et les convertir en un objet JavaScript :

var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }');

Avant l'analyse, assurez-vous que vos données sont au format JSON standard, sinon une erreur peut se produire.

Vous pouvez utiliser notre outil en ligne pour vérifier :https://www.jyshare.com/front-end/53。

Une fois l'analyse terminée, nous pouvons utiliser les données JSON sur la page web :

Exemple

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>

Essayez-le vous-même »

Réception des données JSON depuis le serveur

Nous pouvons utiliser AJAX pour demander des données JSON au serveur et les analyser dans un objet JavaScript.

Exemple

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", "/try/ajax/json_demo.txt", true); xmlhttp.send();

Essayez-le vous-même »

Afficher les données du serveur :

Réception des données de tableau JSON depuis le serveur

Si les données reçues du serveur sont un tableau JSON, JSON.parse les convertira en tableau JavaScript :

Exemple

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();

Essayez-le vous-même »

Afficher les données du serveur :

Exceptions

Analyse des données

JSON ne peut pas stocker d'objets Date.

Si vous devez stocker un objet Date, vous devez le convertir en chaîne de caractères.

Plus tard, convertissez la chaîne en objet Date.

Exemple

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "Create date:" + obj.initDate;

Essayez-le vous-même »

Nous pouvons activer le deuxième paramètre de JSON.parse, reviver, une fonction qui transforme le résultat, appelée pour chaque membre de l'objet.

Exemple

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "Create date:" + obj.initDate;

Essayez-le vous-même »

Fonctions d'analyse syntaxique

JSON n'autorise pas les fonctions, mais vous pouvez stocker une fonction sous forme de chaîne, puis reconvertir la chaîne en fonction.

Exemple

var text = '{ "name":"Example", "alexa":"function () {return 10000;}", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + "Classement Alexa :" + obj.alexa();

Essayez-le vous-même »

Il n'est pas recommandé d'utiliser des fonctions dans JSON.

Prise en charge des navigateurs

Tous les principaux navigateurs prennent en charge la fonction JSON.parse() :

Pris en charge 8.0 3.5 4.0 10.0

Les navigateurs plus anciens peuvent utiliser des bibliothèques tierces pour la prise en charge :https://github.com/douglascrockford/JSON-js

Autres extensions