web-dev-qa-db-fra.com

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 ne peux pas analyser cet objet JSON pour pouvoir utiliser chacun des objets de compteur.

J'essaie d'accomplir ça comme ça:

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

Qu'est-ce que je fais mal ? Je vous remercie!

javascriptjsonextjs
78
maephisto

Javascript a une analyse JSON intégrée pour les chaînes, ce qui, je pense, est ce que vous avez:

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

utiliser ceci 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 travail

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

IMPORTANT: la méthode JSON.parse ne fonctionnera pas avec les anciens navigateurs anciens. Par conséquent, si vous envisagez de rendre votre site Web disponible à travers un laps de temps flexion de la connexion internet, cela pourrait être un problème! Si vous êtes vraiment intéressé, voici un tableau d’aide (qui coche toutes mes cases).

123
musefan

Dans une boucle for-in-loop, la variable en cours d'exécution contient le nom de la propriété, pas la valeur de la propriété.

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

Mais comme les compteurs sont des tableaux, 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);
}
6
Bergi

C'est 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>
5
Fisher Man

"Sencha Way" pour interagir avec les données du serveur est la configuration d'un Ext.data.Store mandaté par un Ext.data.proxy.Proxy (dans ce cas Ext.data.proxy.Ajax) muni d'un Ext.data.reader.Json (pour les données codées JSON , d’autres lecteurs sont également disponibles). Pour réécrire des données sur le serveur, il existe un Ext.data.writer.Writer de plusieurs types.

Voici un exemple de configuration comme celle-ci:

    var store = Ext.create('Ext.data.Store', {
        fields: [
            'counter_name',
            'counter_type',
            'counter_unit'
        ],

        proxy: {
            type: 'ajax',
            url: 'data1.json',

            reader: {
                type: 'json',
                idProperty: 'counter_name',
                rootProperty: 'counters'
            }
        }
    });

data1.json dans cet exemple (également disponible dans ce violon ) contient vos données telles quelles. idProperty: 'counter_name' est probablement facultatif dans ce cas, mais pointe généralement sur l'attribut de clé primaire. rootProperty: 'counters' spécifie quelle propriété contient un tableau d'éléments de données.

Avec une configuration de magasin de cette façon, vous pouvez relire les données du serveur en appelant store.load(). Vous pouvez également connecter le magasin à n’importe quel composant d’interface utilisateur approprié à Sencha Touch, tel que des grilles, des listes ou des formulaires.

1
rzen

Quelque chose de plus au point 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

0
hB0

Cela fonctionne comme un charme!

J'ai donc édité le code selon mes besoins. Et voici les changements: Cela enregistrera le numéro d'identification de la réponse dans la variable d'environnement.

var jsonData = JSON.parse(responseBody);
for (var i = 0; i < jsonData.data.length; i++)
{
    var counter = jsonData.data[i];
    postman.setEnvironmentVariable("schID", counter.id);
}
0
Sobhit Sharma