web-dev-qa-db-fra.com

Accès/traitement (imbriqué) d'objets, de tableaux ou de JSON

J'ai une structure de données imbriquée contenant des objets et des tableaux. Comment puis-je extraire les informations, c'est-à-dire accéder à une ou plusieurs valeurs (ou clés) spécifiques?

Par exemple:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Comment accéder à la name du deuxième élément de items?

713
Felix Kling

Préliminaires

JavaScript n'a qu'un seul type de données pouvant contenir plusieurs valeurs: Object . Un tableau est une forme d'objet spéciale.

Les objets (simples) ont la forme

_{key: value, key: value, ...}
_

Les tableaux ont la forme

_[value, value, ...]
_

Les tableaux et les objets présentent une structure _key -> value_. Les clés d'un tableau doivent être numériques, alors que n'importe quelle chaîne peut être utilisée comme clé dans des objets. Les paires clé-valeur sont aussi appelées les "propriétés" .

On peut accéder aux propriétés en utilisant la notation par points

_const value = obj.someProperty;
_

ou notation entre crochets , si le nom de la propriété ne correspond pas à un code JavaScript valide nom de l'identifiant [spec] , ou le nom est la valeur d'une variable:

_// the space is not a valid character in identifier names
const value = obj["some Property"];

// property name as variable
const name = "some Property";
const value = obj[name];
_

Pour cette raison, les éléments de tableau ne sont accessibles que par la notation entre crochets:

_const value = arr[5]; // arr.5 would be a syntax error

// property name / index as variable
const x = 5;
const value = arr[x];
_

Attends ... et JSON?

JSON est une représentation textuelle des données, tout comme XML, YAML, CSV et autres. Pour travailler avec de telles données, il faut d’abord les convertir en types de données JavaScript, c’est-à-dire des tableaux et des objets (et la façon de travailler avec ceux-ci vient d’être expliquée). Comment analyser JSON est expliqué dans la question Parse JSON dans JavaScript? .

Matériel de lecture

Comment accéder aux tableaux et aux objets est une connaissance fondamentale de JavaScript. Par conséquent, il est conseillé de lire le Guide JavaScript de MDN , en particulier les sections



Accéder aux structures de données imbriquées

Une structure de données imbriquée est un tableau ou un objet qui fait référence à d'autres tableaux ou objets, c'est-à-dire que ses valeurs sont des tableaux ou des objets. On peut accéder à ces structures en appliquant successivement la notation par points ou par crochets.

Voici un exemple:

_const data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};
_

Supposons que nous souhaitons accéder à la name du second élément.

Voici comment nous pouvons le faire étape par étape:

Comme nous pouvons le voir, data est un objet, nous pouvons donc accéder à ses propriétés en utilisant la notation par points. La propriété items est accessible comme suit:

_data.items
_

La valeur est un tableau, pour accéder à son deuxième élément, nous devons utiliser la notation entre crochets:

_data.items[1]
_

Cette valeur est un objet et nous utilisons à nouveau la notation par points pour accéder à la propriété name. Donc on finit par avoir:

_const item_name = data.items[1].name;
_

Alternativement, nous aurions pu utiliser la notation entre crochets pour n'importe laquelle des propriétés, en particulier si le nom contenait des caractères qui l'auraient rendu non valide pour l'utilisation de la notation par points:

_const item_name = data['items'][1]['name'];
_

J'essaie d'accéder à une propriété mais je ne récupère que undefined?

La plupart du temps, lorsque vous obtenez undefined, l'objet/le tableau n'a tout simplement pas de propriété portant ce nom.

_const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined
_

Utilisez console.log ou console.dir et inspectez la structure de l'objet/du tableau. La propriété que vous essayez d'accéder peut être réellement définie sur un objet/tableau imbriqué.

_console.log(foo.bar.baz); // 42
_

Que faire si les noms de propriété sont dynamiques et que je ne les connais pas auparavant?

Si les noms de propriété sont inconnus ou si nous voulons accéder à toutes les propriétés d'un objet/éléments d'un tableau, nous pouvons utiliser le _for...in_ [MDN] boucle pour les objets et le for[MDN] boucle permettant aux tableaux de parcourir toutes les propriétés/éléments.

Objets

Pour itérer sur toutes les propriétés de data, nous pouvons itérer sur l'objet comme suit:

_for (const prop in data) {
    // `prop` contains the name of each property, i.e. `'code'` or `'items'`
    // consequently, `data[prop]` refers to the value of each property, i.e.
    // either `42` or the array
}
_

Selon l'origine de l'objet (et ce que vous voulez faire), vous devrez peut-être vérifier à chaque itération si la propriété est réellement une propriété de l'objet ou s'il s'agit d'une propriété héritée. Vous pouvez le faire avec _Object#hasOwnProperty_ [MDN] .

Comme alternative à _for...in_ avec hasOwnProperty, vous pouvez utiliser _Object.keys_ [MDN] pour obtenir un tableau de noms de propriétés :

_Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
});
_

Tableaux

Pour parcourir tous les éléments du tableau _data.items_ , nous utilisons une boucle for:

_for(let i = 0, l = data.items.length; i < l; i++) {
    // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id` and `obj.name`. 
    // We could also use `data.items[i].id`.
}
_

On pourrait aussi utiliser _for...in_ pour parcourir les tableaux, mais il y a des raisons pour éviter ce problème: Pourquoi est-il 'pour (var item dans la liste)' avec les tableaux considérés comme de mauvaises pratiques en JavaScript? .

Avec la prise en charge croissante par ECMAScript 5 du navigateur, la méthode array forEach[MDN] devient également une alternative intéressante:

_data.items.forEach(function(value, index, array) {
    // The callback is executed for each element in the array.
    // `value` is the element itself (equivalent to `array[index]`)
    // `index` will be the index of the element in the array
    // `array` is a reference to the array itself (i.e. `data.items` in this case)
}); 
_

Dans les environnements prenant en charge ES2015 (ES6), vous pouvez également utiliser le for...of[MDN] boucle, qui fonctionne non seulement pour les tableaux, mais pour tout itérable :

_for (const item of data.items) {
   // `item` is the array element, **not** the index
}
_

Dans chaque itération, _for...of_ nous donne directement l’élément suivant de l’itéré, il n’existe aucun "index" à accéder ou à utiliser.


Que faire si la "profondeur" de la structure de données m'est inconnue?

En plus des clés inconnues, la "profondeur" de la structure de données (c'est-à-dire le nombre d'objets imbriqués) dont elle dispose peut également être inconnue. Comment accéder aux propriétés profondément imbriquées dépend généralement de la structure de données exacte.

Mais si la structure de données contient des motifs répétitifs, par ex. la représentation d'un arbre binaire, la solution comprend généralement to de manière récursive [Wikipédia] accéder à chaque niveau de la structure de données.

Voici un exemple pour obtenir le premier nœud feuille d'un arbre binaire:

_function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild); // <- recursive call
    }
    else if (node.rightChild) {
        return getLeaf(node.rightChild); // <- recursive call
    }
    else { // node must be a leaf node
        return node;
    }
}

const first_leaf = getLeaf(root);
_
_const root = {
    leftChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 42
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 5
        }
    },
    rightChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 6
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 7
        }
    }
};
function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild);
    } else if (node.rightChild) {
        return getLeaf(node.rightChild);
    } else { // node must be a leaf node
        return node;
    }
}

console.log(getLeaf(root).data);_

Un moyen plus générique d'accéder à une structure de données imbriquée avec des clés et une profondeur inconnues consiste à tester le type de la valeur et à agir en conséquence.

Voici un exemple qui ajoute toutes les valeurs primitives d'une structure de données imbriquée dans un tableau (en supposant qu'il ne contient aucune fonction). Si nous rencontrons un objet (ou un tableau), nous appelons simplement toArray à nouveau sur cette valeur (appel récursif).

_function toArray(obj) {
    const result = [];
    for (const prop in obj) {
        const value = obj[prop];
        if (typeof value === 'object') {
            result.Push(toArray(value)); // <- recursive call
        }
        else {
            result.Push(value);
        }
    }
    return result;
}
_
_const data = {
  code: 42,
  items: [{
    id: 1,
    name: 'foo'
  }, {
    id: 2,
    name: 'bar'
  }]
};


function toArray(obj) {
  const result = [];
  for (const prop in obj) {
    const value = obj[prop];
    if (typeof value === 'object') {
      result.Push(toArray(value));
    } else {
      result.Push(value);
    }
  }
  return result;
}

console.log(toArray(data));_


Aides

Comme la structure d'un objet ou d'un tableau complexe n'est pas nécessairement évidente, nous pouvons inspecter la valeur à chaque étape pour décider de la marche à suivre. _console.log_ [MDN] et _console.dir_ [MDN] aidez-nous à le faire. Par exemple (sortie de la console Chrome):

_> console.log(data.items)
 [ Object, Object ]
_

Nous voyons ici que _data.items_ est un tableau avec deux éléments qui sont tous deux des objets. Dans la console Chrome, les objets peuvent même être développés et inspectés immédiatement.

_> console.log(data.items[1])
  Object
     id: 2
     name: "bar"
     __proto__: Object
_

Cela nous indique que _data.items[1]_ est un objet et, après l'avoir développé, nous voyons qu'il a trois propriétés: id, name et ___proto___. Ce dernier est une propriété interne utilisée pour la chaîne de prototypes de l'objet. La chaîne et l'héritage de prototypes sont cependant hors de portée pour cette réponse.

1056
Felix Kling

Vous pouvez y accéder de cette façon

data.items[1].name

ou

data["items"][1]["name"]

Les deux voies sont égales.

58
vitmalina

Si vous essayez d'accéder à une item à partir de la structure exemple par id ou name, sans savoir sa position dans le tableau, le moyen le plus simple consiste à utiliser underscore.js library:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

_.find(data.items, function(item) {
  return item.id === 2;
});
// Object {id: 2, name: "bar"}

D'après mon expérience, l'utilisation de fonctions d'ordre supérieur au lieu de boucles for ou for..in permet d'obtenir un code plus facile à raisonner, et donc plus facile à gérer.

Juste mes 2 cents.

26

Parfois, accéder à un objet imbriqué à l'aide d'une chaîne peut être souhaitable. L'approche simple est le premier niveau, par exemple

var obj = { hello: "world" };
var key = "hello";
alert(obj[key]);//world

Mais ce n'est souvent pas le cas avec JSON complexe. Au fur et à mesure que json devient plus complexe, les approches pour trouver des valeurs à l'intérieur du json deviennent également complexes. Une approche récursive pour naviguer dans le JSON est préférable, et la manière dont cette récursion est exploitée dépend du type de données recherché. Si des instructions conditionnelles sont impliquées, une recherche json search peut être un bon outil à utiliser.

Si la propriété en cours d'accès est déjà connue, mais que le chemin est complexe, par exemple dans cet objet

var obj = {
 arr: [
    { id: 1, name: "larry" },    
    { id: 2, name: "curly" },
    { id: 3, name: "moe" }
 ]
};

Et vous savez que vous voulez obtenir le premier résultat du tableau dans l'objet, peut-être aimeriez-vous utiliser

var moe = obj["arr[0].name"];

Cependant, cela provoquera une exception car il n'y a pas de propriété d'objet portant ce nom. La solution pour pouvoir utiliser ceci serait d’aplatir l’arbre de l’objet. Cela peut être fait de manière récursive.

function flatten(obj){
 var root = {};
 (function tree(obj, index){
   var suffix = toString.call(obj) == "[object Array]" ? "]" : "";
   for(var key in obj){
    if(!obj.hasOwnProperty(key))continue;
    root[index+key+suffix] = obj[key];
    if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");
    if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");   
   }
 })(obj,"");
 return root;
}

Maintenant, l'objet complexe peut être aplati

var obj = previous definition;
var flat = flatten(obj);
var moe = flat["arr[0].name"];//moe

Voici un jsFiddle Demo de cette approche utilisée.

16
Travis J

Cette question est assez ancienne, donc comme une mise à jour contemporaine. Avec le lancement de ES2015, il existe des alternatives pour récupérer les données dont vous avez besoin. Il existe maintenant une fonctionnalité appelée object destructuring pour accéder aux objets imbriqués.

const data = {
  code: 42,
  items: [{
    id: 1,
    name: 'foo'
  }, {
    id: 2,
    name: 'bar'
  }]
};

const {
  items: [, {
    name: secondName
  }]
} = data;

console.log(secondName);

L'exemple ci-dessus crée une variable appelée secondName à partir de la clé name à partir d'un tableau appelé items, le , solitaire indique ignorer le premier objet du tableau. 

Il est intéressant de noter que cet exemple est probablement excessif, car un simple accès à un tableau est plus facile à lire, mais il est utile lors de la décomposition d'objets en général. 

Ceci est une introduction très brève à votre cas d'utilisation spécifique, la déstructuration peut être une syntaxe inhabituelle à laquelle il faut s'habituer au début. Je vous recommande de lire la documentation de Mozilla Destructuring Assignment pour en savoir plus.

9
Alex KeySmith

Utiliser JSONPath serait l’une des solutions les plus flexibles si vous souhaitez inclure une bibliothèque: https://github.com/s3u/JSONPath (noeud et navigateur)

Pour votre cas d'utilisation, le chemin JSON serait:

$..items[1].name

alors:

var secondName = jsonPath.eval(data, "$..items[1].name");
7
Andrejs

Je préfère JQuery. C'est plus propre et facile à lire.

 $.each($.parseJSON(data), function (key, value) {
    alert(value.<propertyname>);
});

6
Rudy Hinojosa

Pour accéder à un attribut imbriqué, vous devez spécifier son nom, puis effectuer une recherche dans l'objet.

Si vous connaissez déjà le chemin exact, vous pouvez le coder en dur dans votre script de la manière suivante:

data['items'][1]['name']

ceux-ci fonctionnent aussi -

data.items[1].name
data['items'][1].name
data.items[1]['name']

Lorsque vous ne connaissez pas le nom exact à l'avance, ou un utilisateur est celui qui vous fournit le nom. Ensuite, une recherche dynamique dans la structure de données est requise. Certains ont suggéré ici que la recherche peut être effectuée à l'aide d'une boucle for, mais il existe un moyen très simple de parcourir un chemin à l'aide de Array.reduce .

const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
const path = [ 'items', '1', 'name']
let result = path.reduce((a,v) => a[v], data)

Le chemin est un moyen de dire: Prenons d’abord l’objet avec la clé items, qui se trouve être un tableau. Ensuite, prenez l'élément 1- st (0 tableaux d'index). Enfin, prenez l'objet avec la clé name dans cet élément de tableau, qui se trouve être la chaîne bar.

Si vous avez un très long chemin, vous pouvez même utiliser String.split pour rendre tout cela plus facile -

'items.1.name'.split('.').reduce((a,v) => a[v], data)

Ceci est du simple JavaScript, sans utiliser de bibliothèques tierces telles que jQuery ou lodash.

6
Evgeny

Vous pouvez utiliser la fonction lodash _get:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3
5
Sergey

Si vous recherchez un ou plusieurs objets répondant à certains critères, quelques options vous permettent d'utiliser query-js

//will return all elements with an id larger than 1
data.items.where(function(e){return e.id > 1;});
//will return the first element with an id larger than 1
data.items.first(function(e){return e.id > 1;});
//will return the first element with an id larger than 1 
//or the second argument if non are found
data.items.first(function(e){return e.id > 1;},{id:-1,name:""});

Il existe également une single et une singleOrDefault ils fonctionnent beaucoup comme firstet firstOrDefault respectivement. La seule différence est qu'ils lanceront si plus qu'une correspondance est trouvée.

pour plus d'explications sur query-js, vous pouvez commencer par ceci post

4
Rune FS

Accéder à un objet multi niveaux de manière dynamique.

var obj = {
  name: "salut",
  subobj: {
    subsubobj: {
      names: "I am sub sub obj"
    }
  }
};

var level = "subobj.subsubobj.names";
level = level.split(".");

var currentObjState = obj;

for (var i = 0; i < level.length; i++) {
  currentObjState = currentObjState[level[i]];
}

console.log(currentObjState);

Violon de travail: https://jsfiddle.net/andreitodorut/3mws3kjL/

3
Andrei Todorut
var ourStorage = {


"desk":    {
    "drawer": "stapler"
  },
"cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"

ou

//parent.subParent.subsubParent["almost there"]["final property"]

Fondamentalement, utilisez un point entre chaque descendant qui se déploie en dessous et lorsque vous avez des noms d'objet composés de deux chaînes, vous devez utiliser la notation ["obj Name"]. Sinon, un point suffirait;

Source: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

pour ajouter à cela, accéder aux tableaux imbriqués se passerait comme suit:

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // Outputs "Fluffy"
ourPets[1].names[0]; // Outputs "Spot"

Source: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays/

3
Johnny

Le Underscore Js Way

Ce qui est une bibliothèque JavaScript qui fournit tout un bazar d’aides utiles functional programming sans étendre les objets intégrés.

Solution:

var data = {
  code: 42,
  items: [{
    id: 1,
    name: 'foo'
  }, {
    id: 2,
    name: 'bar'
  }]
};

var item = _.findWhere(data.items, {
  id: 2
});
if (!_.isUndefined(item)) {
  console.log('NAME =>', item.name);
}

//using find - 

var item = _.find(data.items, function(item) {
  return item.id === 2;
});

if (!_.isUndefined(item)) {
  console.log('NAME =>', item.name);
}
3
Mohan Dere

Ancienne question mais personne n’a mentionné le lodash (juste souligné).

Dans le cas où vous utilisez déjà lodash dans votre projet, je pense une manière élégante de le faire dans un exemple complexe:

Opt 1

_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')

pareil que:

Opt 2

response.output.fund.data[0].children[0].group.myValue

La différence entre la première et la deuxième option est que dans le Opt 1 si l'une des propriétés manque (indéfinie) dans le chemin, vous n'obtenez pas d'erreur, le troisième paramètre est renvoyé.

Pour les filtres de tableau, lodash a _.find() mais je préfère utiliser la fonction filter() régulière. Mais je pense toujours que la méthode ci-dessus _.get() est super utile lorsque vous travaillez avec des données vraiment complexes. Dans le passé, je faisais face à des API très complexes et c'était très pratique!

J'espère que cela peut être utile pour ceux qui recherchent des options pour manipuler des données vraiment complexes que le titre implique.

3
Ventura

Je ne pense pas que le questionneur concerne seulement un objet imbriqué au niveau, je présente donc la démo suivante pour montrer comment accéder au nœud de l'objet Json profondément imbriqué. Très bien, trouvons le noeud avec l'ID '5'.

var data = {
  code: 42,
  items: [{
    id: 1,
    name: 'aaa',
    items: [{
        id: 3,
        name: 'ccc'
      }, {
        id: 4,
        name: 'ddd'
      }]
    }, {
    id: 2,
    name: 'bbb',
    items: [{
        id: 5,
        name: 'eee'
      }, {
        id: 6,
        name: 'fff'
      }]
    }]
};

var jsonloop = new JSONLoop(data, 'id', 'items');

jsonloop.findNodeById(data, 5, function(err, node) {
  if (err) {
    document.write(err);
  } else {
    document.write(JSON.stringify(node, null, 2));
  }
});
<script src="https://rawgit.com/dabeng/JSON-Loop/master/JSONLoop.js"></script>

2
dabeng

Juste au cas où quiconque visiterait cette question en 2017 ou plus tard et recherchant un moyen facile à mémoriser, voici un article de blog élaboré sur Accès aux objets imbriqués en JavaScript sans être embrouillé. 

Impossible de lire la propriété 'foo' d'une erreur non définie

1. Modèle d'accès aux objets imbriqués d'Oliver Steele

Le moyen le plus simple et le plus propre consiste à utiliser le modèle d'accès aux objets imbriqués d'Oliver Steele.

const name = ((user || {}).personalInfo || {}).name;

Avec cette notation, vous ne rencontrerez jamais

Impossible de lire la propriété 'nom' de non défini

En gros, vous vérifiez si l'utilisateur existe, sinon vous créez un objet vide à la volée. De cette façon, on utilisera toujours toujours la clé de niveau suivant depuis un objet existant ou un objet vide, mais jamais depuis un indéfini.

2. Accéder aux objets imbriqués à l'aide de Array Réduire

Pour pouvoir accéder aux tableaux imbriqués, vous pouvez écrire votre propre tableau, réduisez util.

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// this will return the city from the first address item.

Il existe également une excellente bibliothèque minimale de type typy qui fait tout cela pour vous.

1
Dinesh Pandiyan

Voici une approche dynamique - votre clé 'profonde' est la chaîne 'items[1].name' (vous pouvez utiliser la notation de tableau [i] à n’importe quel niveau) - si la clé n’est pas valide, alors non défini est renvoyé.

let deep = (o,k) => {
  return k.split('.').reduce((a,c,i) => {
    let m=c.match(/(.*?)\[(\d*)\]/);
    if(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]];
    return a==null ? a: a[c];
  },o)
}
var data = {
    code: 42,
    items: [
      { id: 1, name: 'foo'}, 
      { id: 2, name: 'bar'},
   ]
};

let deep = (o,k) => {
  return k.split('.').reduce((a,c,i) => {
    let m=c.match(/(.*?)\[(\d*)\]/);
    if(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]];
    return a==null ? a: a[c];
  },o)
}

console.log( deep(data,'items[1].name') );
0
Kamil Kiełczewski

Ma stringjson provient du fichier PHP, mais néanmoins, j'indique ici dans var. Quand je prends directement mon json dans obj il ne montrera rien c'est pourquoi je mets mon fichier json comme

var obj=JSON.parse(stringjson); donc après cela, j’obtiens message obj et l’affiche dans une boîte d’alerte, puis j’obtiens data qui est un tableau json et le stocke dans une variable ArrObj puis je lis le premier objet de ce tableau avec une valeur clé comme celle-ci ArrObj[0].id

     var stringjson={
        "success": true,
        "message": "working",
        "data": [{
                  "id": 1,
                  "name": "foo"
         }]
      };

                var obj=JSON.parse(stringjson);
                var key = "message";
                alert(obj[key]);
                var keyobj = "data";
                var ArrObj =obj[keyobj];

                alert(ArrObj[0].id);
0
Manthan Patel

La fonction grep de jQuery vous permet de filtrer à travers un tableau:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

$.grep(data.items, function(item) {
    if (item.id === 2) {
        console.log(item.id); //console id of item
        console.log(item.name); //console name of item
        console.log(item); //console item object
        return item; //returns item object
    }

});
// Object {id: 2, name: "bar"}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
user7110739

Une approche pythonique, récursive et fonctionnelle pour résoudre les arbres JSON arbitraires:

handlers = {
    list:  iterate,
    dict:  delve,
    str:   emit_li,
    float: emit_li,
}

def emit_li(stuff, strong=False):
    emission = '<li><strong>%s</strong></li>' if strong else '<li>%s</li>'
    print(emission % stuff)

def iterate(a_list):
    print('<ul>')
    map(unravel, a_list)
    print('</ul>')

def delve(a_dict):
    print('<ul>')
    for key, value in a_dict.items():
        emit_li(key, strong=True)
        unravel(value)
    print('</ul>')

def unravel(structure):
    h = handlers[type(structure)]
    return h(structure)

unravel(data)

data est une liste python (analysée à partir d'une chaîne de texte JSON):

data = [
    {'data': {'customKey1': 'customValue1',
           'customKey2': {'customSubKey1': {'customSubSubKey1': 'keyvalue'}}},
  'geometry': {'location': {'lat': 37.3860517, 'lng': -122.0838511},
               'viewport': {'northeast': {'lat': 37.4508789,
                                          'lng': -122.0446721},
                            'southwest': {'lat': 37.3567599,
                                          'lng': -122.1178619}}},
  'name': 'Mountain View',
  'scope': 'GOOGLE',
  'types': ['locality', 'political']}
]
0
pX0r