120 votes

Javascript comment analyser un tableau JSON

J'utilise Sencha Touch (ExtJS) pour obtenir un message JSON du serveur. Le message que je reçois est celui-ci :

{
"success": true,
"counters": [
    {
        "counter_name": "dsd",
        "counter_type": "sds",
        "counter_unit": "sds"
    },
    {
        "counter_name": "gdg",
        "counter_type": "dfd",
        "counter_unit": "ds"
    },
    {
        "counter_name": "sdsData",
        "counter_type": "sds",
        "counter_unit": "   dd       "
    },
    {
        "counter_name": "Stoc final",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "Consum GPL",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "sdg",
        "counter_type": "dfg",
        "counter_unit": "gfgd"
    },
    {
        "counter_name": "dfgd",
        "counter_type": "fgf",
        "counter_unit": "liggtggggri     "
    },
    {
        "counter_name": "fgd",
        "counter_type": "dfg",
        "counter_unit": "kwfgf       "
    },
    {
        "counter_name": "dfg",
        "counter_type": "dfg",
        "counter_unit": "dg"
    },
    {
        "counter_name": "gd",
        "counter_type": "dfg",
        "counter_unit": "dfg"
    }

    ]
}

Mon problème est que je n'arrive pas à analyser cet objet JSON pour pouvoir utiliser chacun des objets compteur.

J'essaie d'accomplir cela comme ceci :

var jsonData = Ext.util.JSON.decode(myMessage);
for (var counter in jsonData.counters) {
     console.log(counter.counter_name);
 }

Qu'est-ce que je fais de mal ? Merci.

1 votes

172voto

musefan Points 23208

Javascript a une analyse JSON intégrée pour les chaînes de caractères, ce qui, je pense, est votre cas :

var myObject = JSON.parse("my json string");

pour l'utiliser avec votre exemple serait :

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

Voici un exemple de fonctionnement

EDIT : Il y a une erreur dans votre utilisation de la boucle for (j'ai manqué cela lors de ma première lecture, crédit à @Evert pour le spot). L'utilisation d'une boucle for-in va définir le var comme étant le nom de la propriété de la boucle actuelle, et non les données réelles. Voir ma boucle mise à jour ci-dessus pour une utilisation correcte

IMPORTANT : le JSON.parse ne fonctionnera pas dans les anciens navigateurs - donc si vous prévoyez de rendre votre site web disponible par le biais d'une connexion internet à délai de réponse court, cela pourrait être un problème ! Mais si vous êtes vraiment intéressé, Voici un graphique de soutien (qui remplit toutes mes conditions).

1 votes

S'il utilise une bibliothèque qui prend en charge une fonction parseJSON multi-navigateur, il doit l'utiliser. De plus, vous répétez l'erreur de la boucle.

0 votes

J'obtiens une erreur sur la première ligne lorsque je l'exécute : Erreur de Syntaxe Non Rattrapée : Unxpected token o

0 votes

@nights : Il est plus que probable que vous avez une chaîne JSON invalide alors, essayez un outil de validation JSON en ligne, comme celui-ci

8voto

Fisher Man Points 179

Voici ma réponse :

<!DOCTYPE html>
<html>
   <body>
      <h2>Create Object from JSON String</h2>
      <p>
         First Name: <span id="fname"></span><br> 
         Last Name: <span id="lname"></span><br> 
      </p>
      <script>
         var txt =
           '{"employees":[' +
           '{"firstName":"John","lastName":"Doe" },' +
           '{"firstName":"Anna","lastName":"Smith" },' +
           '{"firstName":"Peter","lastName":"Jones" }]}';

         //var jsonData = eval ("(" + txt + ")");
         var jsonData = JSON.parse(txt);
         for (var i = 0; i < jsonData.employees.length; i++) {
             var counter = jsonData.employees[i];
             //console.log(counter.counter_name);
             alert(counter.firstName);
         }
      </script>
   </body>
</html>

8voto

Bergi Points 104242

Dans un for-in-loop, la variable courante contient le nom de la propriété, et non sa valeur.

for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

Mais comme counters est un tableau, vous devez utiliser une boucle for normale :

for (var i=0; i<jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

3voto

Evert Points 17625

Vous devriez afficher le message d'erreur que vous obtenez lorsque vous affichez une erreur.

Cela dit, il ne semble pas y avoir de problème avec votre analyse json, vous ne savez simplement pas encore comment fonctionnent les boucles.

for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

En soi, cela peut poser des problèmes si le prototype du tableau est surchargé. Par conséquent, il s'agit d'une meilleure syntaxe :

for (var i=0; i<jsonData.counters.length; i++) {
    console.log(jsonData.counters[i].counter_name);
}

1voto

hB0 Points 601

Quelque chose de plus pertinent pour moi

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';  
var contact = JSON.parse(jsontext);  
document.write(contact.surname + ", " + contact.firstname);  
document.write(contact.phone[1]);  
// Output:  
// Aaberg, Jesper  
// 555-0100

Référence : https://docs.microsoft.com/en-us/scripting/javascript/reference/json-parse-function-javascript

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X