Parse JSON en JavaScript?
Je veux analyser une chaîne JSON en JavaScript. La réponse est quelque chose comme
var response = '{"result":true,"count":1}';
Comment puis-je obtenir les valeurs result et count à partir de ceci?
Le moyen standard d’analyser JSON en JavaScript est JSON.parse()
L'API JSON a été introduite avec ES5 (2011) et a depuis été implémentée dans> 99% des navigateurs par part de marché, ainsi que dans Node.js. Son utilisation est simple:
const json = '{ "fruit": "pineapple", "fingers": 10 }';
const obj = JSON.parse(json);
console.log(obj.fruit, obj.fingers);
La seule fois où vous ne pourrez pas utiliser JSON.parse(), c’est si vous programmez pour un navigateur ancien, tel que IE 7 (2006), IE 6 (2001), Firefox 3. (2008), Safari 3.x (2009), etc. Sinon, vous pouvez vous trouver dans un environnement JavaScript ésotérique qui n'inclut pas les API standard. Dans ces cas, utilisez json2.js , l'implémentation de référence de JSON écrite par Douglas Crockford , l'inventeur de JSON. Cette bibliothèque fournira une implémentation de JSON.parse().
Lors du traitement de fichiers JSON extrêmement volumineux, JSON.parse() peut s’étouffer en raison de sa nature et de sa conception synchrones. Pour résoudre ce problème, le site Web JSON recommande des bibliothèques tierces telles que Oboe.js et clarinet , qui fournissent une analyse en flux JSON.
jQuery avait une fois une fonction $.parseJSON() , mais il était obsolète avec jQuery 3.0. En tout cas, pendant longtemps, ce n’était rien de plus qu’un wrapper autour de JSON.parse().
ATTENTION!
Cette réponse provient d'une époque ancienne de la programmation JavaScript au cours de laquelle il n'existait aucun moyen intégré d'analyser JSON. Les conseils donnés ici ne sont plus applicables et probablement dangereux. Dans une perspective moderne, analyser JSON en faisant appel à jQuery ou en appelant eval () est absurde. Sauf si vous devez prendre en charge IE 7 ou Firefox 3.0, la méthode correcte pour analyser JSON est JSON.parse () .
Tout d'abord, vous devez vous assurer que le code JSON est valide.
Après cela, je vous recommanderais d'utiliser une bibliothèque JavaScript telle que jQuery ou Prototype si vous le pouvez, car ces éléments sont bien gérés dans ces bibliothèques.
D'autre part, si vous ne voulez pas utiliser une bibliothèque et que vous pouvez garantir la validité de l'objet JSON, je voudrais simplement envelopper la chaîne dans une fonction anonyme et utiliser la fonction eval.
Cela n'est pas recommandé si vous obtenez l'objet JSON auprès d'une autre source qui n'est pas absolument fiable, car la fonction eval autorise le code renégat si vous le souhaitez.
Voici un exemple d'utilisation de la fonction eval:
var strJSON = '{"result":true,"count":1}';
var objJSON = eval("(function(){return " + strJSON + ";})()");
alert(objJSON.result);
alert(objJSON.count);
Si vous contrôlez le navigateur utilisé ou si vous n'êtes pas inquiet avec un navigateur plus ancien, vous pouvez toujours utiliser la méthode JSON.parse.
C'est vraiment la solution idéale pour l'avenir.
Si vous obtenez cela depuis un site extérieur, il peut être utile d'utiliser getJSON de jQuery. Si c'est une liste, vous pouvez la parcourir avec $ .each
$.getJSON(url, function (json) {
alert(json.result);
$.each(json.list, function (i, fb) {
alert(fb.result);
});
});
L'exemple suivant vous le montrera:
let contactJSON = '{"name":"John Doe","age":"11"}';
let contact = JSON.parse(contactJSON);
console.log(contact.name + ", " + contact.age);
// Output: John Doe, 11
Si vous souhaitez utiliser JSON pour les navigateurs plus anciens, vous pouvez le charger de manière conditionnelle avec:
<script>
window.JSON ||
document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"><\/scr'+'ipt>');
</script>
Désormais, l’objet standard window.JSON est disponible, quel que soit le navigateur utilisé par le client.
Si vous transmettez une variable de chaîne (une chaîne JSON bien formée) à JSON.parse à partir de MVC @Viewbag avec une guillemet double, "", vous devez la traiter avant JSON.parse (jsonstring)
var jsonstring = '@ViewBag.jsonstring';
jsonstring = jsonstring.replace(/"/g, '"');
Vous pouvez soit utiliser la fonction eval comme dans d'autres réponses. (N'oubliez pas les accolades supplémentaires.) Vous saurez pourquoi lorsque vous creusez plus profondément), ou utilisez simplement la fonction jQuery parseJSON:
var response = '{"result":true , "count":1}';
var parsedJSON = $.parseJSON(response);
OR
Vous pouvez utiliser ce code ci-dessous.
var response = '{"result":true , "count":1}';
var jsonObject = JSON.parse(response);
Et vous pouvez accéder aux champs en utilisant jsonObject.result et jsonObject.count.
La manière la plus simple en utilisant la méthode parse():
var response = '{"a":true,"b":1}';
var JsonObject= JSON.parse(response);
voici un exemple de comment obtenir des valeurs:
var myResponseResult = JsonObject.a;
var myResponseCount = JsonObject.b;
JSON.parse () convertit toute chaîne JSON transmise dans la fonction en un objet JSON.
Pour une meilleure compréhension, appuyez sur F12 pour ouvrir l'élément d'inspection de votre navigateur et accédez à la console pour écrire les commandes suivantes:
var response = '{"result":true,"count":1}'; // Sample JSON object (string form)
JSON.parse(response); // Converts passed string to a JSON object.
Maintenant, lancez la commande:
console.log(JSON.parse(response));
Vous obtiendrez une sortie sous forme d'objet {résultat: true, nombre: 1}.
Pour utiliser cet objet, vous pouvez l'assigner à la variable, disons obj:
var obj = JSON.parse(response);
Maintenant, en utilisant obj et l’opérateur point (.), Vous pouvez accéder aux propriétés de l’objet JSON.
Essayez d'exécuter la commande
console.log(obj.result);
Sans utiliser une bibliothèque, vous pouvez utiliser eval - la seule fois que vous devriez utiliser. Il est cependant plus sûr d'utiliser une bibliothèque.
par exemple...
var response = '{"result":true , "count":1}';
var parsedJSON = eval('('+response+')');
var result=parsedJSON.result;
var count=parsedJSON.count;
alert('result:'+result+' count:'+count);
Si tu veux
var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);
vous pouvez accéder aux éléments JSON par JsonObject avec (.) point:
JsonObject.result;
JsonObject.count;
Je pensais que JSON.parse(myObject) fonctionnerait. Mais selon les navigateurs, il peut être intéressant d’utiliser eval('('+myObject+')'). Le seul problème que je puisse recommander est la liste multi-niveaux en JSON.
Un moyen facile de le faire:
var data = '{"result":true,"count":1}';
var json = eval("[" +data+ "]")[0]; // ;)
Si vous utilisez Dojo Toolkit :
require(["dojo/json"], function(JSON){
JSON.parse('{"hello":"world"}', true);
});
Comme mentionné par de nombreux autres, la plupart des navigateurs supportent JSON.parse et JSON.stringify.
Maintenant, j'aimerais également ajouter que si vous utilisez AngularJS (ce que je recommande vivement), il fournit également les fonctionnalités dont vous avez besoin:
var myJson = '{"result": true, "count": 1}';
var obj = angular.fromJson(myJson);//equivalent to JSON.parse(myJson)
var backToJson = angular.toJson(obj);//equivalent to JSON.stringify(obj)
Je voulais juste ajouter des informations sur AngularJS afin de fournir une autre option. Notez qu'AngularJS ne prend pas officiellement en charge Internet Explorer 8 (et les versions antérieures, d'ailleurs), bien que, par expérience, la plupart des éléments semblent fonctionner plutôt bien.
Si vous utilisez jQuery, c'est simple:
var response = '{"result":true,"count":1}';
var obj = $.parseJSON(response);
alert(obj.result); //true
alert(obj.count); //1