Javascript comment analyser le tableau JSON

92

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 afin de pouvoir utiliser chacun des objets compteur.

J'essaye 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 mal ? Je vous remercie!

javascript  json  extjs 
— maephisto
source
1
— T.Todua

Réponses:

140

Javascript a une analyse JSON intégrée pour les chaînes, ce que je pense 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 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 définira la variable comme le nom de 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 : la JSON.parseméthode ne fonctionnera pas dans les anciens navigateurs anciens - donc si vous prévoyez de rendre votre site Web disponible via une sorte de connexion Internet à temps perdu, cela pourrait être un problème! Si vous êtes vraiment intéressé, voici un tableau de support (qui coche toutes mes cases).

— musefan
source
1
S'il utilise une bibliothèque qui prend en charge une fonction parseJSON inter-navigateurs, il devrait l'utiliser. De plus, vous répétez l'erreur de boucle.
— Bergi
J'obtiens une erreur sur la première ligne lorsque j'exécute ceci: Uncaught SyntaxError: Uncaught token o
— Nights
@nights: Il est fort probable que vous ayez une chaîne JSON invalide, alors essayez un outil de validation JSON en ligne, comme celui-ci
— musefan
8

Ceci 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>
— Pêcheur
source
6

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 compteurs 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);
}
— Bergi
source
1

La "méthode Sencha" pour interagir avec les données du serveur consiste à configurer un Ext.data.Storeproxy par un Ext.data.proxy.Proxy(dans ce cas Ext.data.proxy.Ajax) fourni avec un Ext.data.reader.Json(pour les données codées JSON, il existe également d'autres lecteurs disponibles). Pour réécrire des données sur le serveur, il existe Ext.data.writer.Writerplusieurs 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.jsondans cet exemple (également disponible dans ce violon ) contient vos données textuellement. 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é de Sencha Touch, comme des grilles, des listes ou des formulaires.

— rzen
source
0

Cela fonctionne comme du 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);
}
— Sobhit Sharma
source
0

La réponse avec le vote le plus élevé est une erreur. quand je l'ai utilisé, je le découvre à la ligne 3:

var counter = jsonData.counters[i];

Je l'ai changé en:

var counter = jsonData[i].counters;

et cela a fonctionné pour moi. Il y a une différence avec les autres réponses de la ligne 3:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData[i].counters;
    console.log(counter.counter_name);
}
— Mahdi Jalali
source
1
Peut-être vous dire peut où vous avez dit devrait . Cependant, il est préférable d'ajouter plus de détails / explications à votre code, cela aidera mieux OP et d'autres personnes qui ont la même question.
— Tiw
Vous pouvez également expliquer un peu pourquoi vous avez choisi cette méthode afin que l'utilisateur en apprenne un peu plus. Cela aiderait à améliorer cette réponse.
— TsTeaTime
la réponse avec le plus de votes a répondu à cette question mais quand je l'utilise, j'ai compris que c'était faux à la ligne 4: var counter = jsonData.counters [i]; Mais je le change en: var counter = jsonData [i] .counters; et cela a fonctionné. donc j'ai dit peut au lieu de devrait.
— Mahdi Jalali
0

Juste comme un avertissement ...

var data = JSON.parse(responseBody);

est obsolète .

Postman Learning Center suggère maintenant

var jsonData = pm.response.json();
— A dessiné
source
-1

Vous devez utiliser une banque de données et un proxy dans ExtJs. Il existe de nombreux exemples de cela et le lecteur JSON analyse automatiquement le message JSON dans le modèle que vous avez spécifié.

Il n'est pas nécessaire d'utiliser du Javascript de base lors de l'utilisation d'ExtJs, tout est différent, vous devez utiliser les moyens d'ExtJs pour tout faire correctement. Lisez attentivement la documentation, c'est bien.

À propos, ces exemples valent également pour Sencha Touch (en particulier la v2), qui repose sur les mêmes fonctions de base que ExtJs.

— Geerten
source
-1

Je ne sais pas si mes données correspondaient exactement, mais j'avais un tableau de tableaux d'objets JSON, qui ont été exportés à partir de jQuery FormBuilder lors de l'utilisation de pages.

J'espère que ma réponse pourra aider tous ceux qui tombent sur cette question à la recherche d'une réponse à un problème similaire à ce que j'avais.

Les données ressemblaient un peu à ceci: 

var allData = 
[
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ],
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ]
]

Ce que j'ai fait pour analyser cela était simplement de faire ce qui suit: 

JSON.parse("["+allData.toString()+"]")
— James Wolfe
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.