Accès / processus (imbriqué) objets, tableaux ou JSON

vous pouvez y accéder de cette façon

data.items[1].name

ou

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

les deux chemins sont égaux.

dans le cas où vous essayez d'accéder à un item de la structure d'exemple par id ou name , sans savoir sa position dans le tableau, la meilleure façon de le faire serait d'utiliser underscore.js bibliothèque:

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 for ou for..in entraîne des boucles de code qui sont plus faciles à raisonner, et donc plus maintenables.

juste mes 2 cents.

parfois, l'accès à un objet imbriqué à l'aide d'une chaîne de caractères 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 les json complexes. Comme json devient plus complexe, les approches pour trouver des valeurs à l'intérieur de la json deviennent également complexes. Une approche récursive pour naviguer dans le json est la meilleure, et la façon dont cette récursion est mise à profit dépendra du type de données recherchées. Si il y a conditionnelle les déclarations en cause, un json "recherche 1519100920" peut être un bon outil à utiliser.

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

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

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;
}

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

voici un jsFiddle Demo de cette approche est utilisée.

objets et tableaux a beaucoup de méthodes intégrées qui peuvent vous aider avec le traitement des données.

Note: dans de nombreux exemples, j'utilise arrow functions . Elles sont similaires aux expressions de fonction , mais elles lient lexicalement la valeur this .

Object.keys() , Object.values() (ES 2017) et Object.entries() (ES 2017)

Object.keys() retourne un tableau des clés d'un objet, Object.values() retourne un tableau des valeurs de l'objet, et Object.entries() retourne un tableau des clés de l'objet et des valeurs correspondantes dans un format [key, value] .

const obj = {
  a: 1
 ,b: 2
 ,c: 3
}

console.log(Object.keys(obj)) // ['a', 'b', 'c']
console.log(Object.values(obj)) // [1, 2, 3]
console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]

Object.entries() avec un pour-de la boucle et de la déstructuration d'affectation

const obj = {
  a: 1
 ,b: 2
 ,c: 3
}

for (const [key, value] of Object.entries(obj)) {
  console.log(`key: ${key}, value: ${value}`)
}

C'est très pratique pour itérer le résultat de Object.entries() avec un de la boucle et déstructuration "assignation 1519520920" .

for (const element of Object.entries(obj)) {
  const key = element[0]
       ,value = element[1]
}

Array.prototype.every() et Array.prototype.some()

la "méthode 1519310920" retourne true si la fonction de rappel spécifiée retourne true pour chaque élément du tableau. La méthode some() retourne true si la fonction de rappel spécifiée retourne true pour certains (au moins un) élément.

const arr = [1, 2, 3]

// true, because every element is greater than 0
console.log(arr.every(x => x > 0))
// false, because 3^2 is greater than 5
console.log(arr.every(x => Math.pow(x, 2) < 5))
// true, because 2 is even (the remainder from dividing by 2 is 0)
console.log(arr.some(x => x % 2 === 0))
// false, because none of the elements is equal to 5
console.log(arr.some(x => x === 5))

Array.prototype.find() et Array.prototype.filter()

la méthode find() retourne le premier élément qui satisfait à la fonction de rappel fournie. La méthode filter() retourne un tableau de tous les éléments qui satisfont la fonction de rappel fournie.

const arr = [1, 2, 3]

// 2, because 2^2 !== 2
console.log(arr.find(x => x !== Math.pow(x, 2)))
// 1, because it's the first element
console.log(arr.find(x => true))
// undefined, because none of the elements equals 7
console.log(arr.find(x => x === 7))

// [2, 3], because these elements are greater than 1
console.log(arr.filter(x => x > 1))
// [1, 2, 3], because the function returns true for all elements
console.log(arr.filter(x => true))
// [], because none of the elements equals neither 6 nor 7
console.log(arr.filter(x => x === 6 || x === 7))

Array.prototype.map()

le map() méthode retourne un tableau avec les résultats de l'appel d'une fonction de rappel fourni sur les éléments du tableau.

const arr = [1, 2, 3]

console.log(arr.map(x => x + 1)) // [2, 3, 4]
console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']
console.log(arr.map(x => x)) // [1, 2, 3] (no-op)
console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]
console.log(arr.map(String)) // ['1', '2', '3']

Array.prototype.reduce()

la méthode reduce() réduit un tableau à une seule valeur en appelant la fonction de rappel fournie avec deux éléments.

const arr = [1, 2, 3]

// Sum of array elements.
console.log(arr.reduce((a, b) => a + b)) // 6
// The largest number in the array.
console.log(arr.reduce((a, b) => a > b ? a : b)) // 3

la méthode reduce() prend un second paramètre facultatif, qui est la valeur initiale. C'est utile lorsque le tableau sur lequel vous appelez reduce() peut avoir zéro ou un élément. Par exemple, si nous voulions créer une fonction sum() qui prend un tableau comme argument et renvoie la somme de tous les éléments, nous pourrions l'écrire comme ceci:

const sum = arr => arr.reduce((a, b) => a + b, 0)

console.log(sum([]))     // 0
console.log(sum([4]))    // 4
console.log(sum([2, 5])) // 7

cette question est assez ancienne, donc comme une mise à jour contemporaine. Avec le début de ES2015, il y a des alternatives pour obtenir les données dont vous avez besoin. Il y a maintenant une fonctionnalité appelée déstructuration d'objet 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 touche name à partir d'un tableau appelé items , le solitaire , dit premier objet dans le tableau.

notamment, il est probablement exagéré pour cet exemple, comme simple tableau acccess est plus facile à lire, mais il vient en utile lors de la séparation des objets en général.

c'est une introduction très brève à votre cas d'utilisation spécifique, la déstructuration peut être une syntaxe inhabituelle pour s'habituer d'abord. Je recommande la lecture de Mozilla's Destructuring Assignment documentation pour en savoir plus.

utiliser JSONPath serait l'une des solutions les plus flexibles si vous êtes prêt à inclure une bibliothèque: https://github.com/s3u/JSONPath (nœud et navigateur)

pour votre cas d'utilisation le chemin json serait:

$..items[1].name

:

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

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

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

pour accéder à un attribut imbriqué, vous devez spécifier son nom et ensuite chercher à travers l'objet.

si vous connaissez déjà le chemin exact, alors vous pouvez hardcode it dans votre script comme ceci:

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

ceux - ci travaillent aussi -

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

lorsque vous ne connaissez pas le nom exact avant main, ou un utilisateur est celui qui fournit le nom pour vous. Il faut ensuite effectuer une recherche dynamique dans la structure des données. Certains ont suggéré ici que la recherche peut être effectuée en utilisant une boucle for , mais il y a une façon très simple de parcourir un chemin en utilisant 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 une façon de dire: prenez D'abord l'objet avec la touche items , qui se trouve être un tableau. Ensuite, prenez l'élément 1 - st (tableaux d'index 0). Dernier prendre l'objet avec la touche 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)

C'est tout simplement JavaScript, sans utiliser de bibliothèques tierces comme jQuery ou lodash.

si vous recherchez un ou plusieurs objets qui répondent à certains critères, vous avez quelques options en utilisant 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 y a aussi un single et un singleOrDefault ils fonctionnent un peu comme first et firstOrDefault respectivement. La seule différence est que ils vont jeter si plus qu'une correspondance est trouvée.

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

vous pouvez utiliser lodash _get fonction:

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

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

Le trait de Soulignement js Façon

qui est une bibliothèque JavaScript qui fournit tout un tas d'utiles functional programming helpers sans étendre des 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);
}

Je ne pense pas que le questionneur ne concerne qu'un seul niveau d'objet imbriqué, donc je présente la démo suivante pour montrer comment accéder au noeud de l'objet JSON 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>

question ancienne mais comme personne n'a mentionné lodash (juste souligner).

dans le cas où vous utilisez déjà lodash dans votre projet, je pense qu'une façon élégante de le faire dans un exemple complexe:

Opt 1

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

comme:

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 vous avez une des propriétés manquantes (non définie) dans le chemin vous n'obtenez pas d'erreur, il vous renvoie le troisième paramètre.

pour le filtre de réseau lodash a _.find() mais je préfère utiliser la régulière filter() . Mais je pense toujours que la méthode ci-dessus _.get() est super utile quand on travaille avec des données vraiment complexes. J'ai affronté dans le passé APIs très complexe et il était pratique!

j'espère qu'il peut être utile pour recherche d'options pour manipuler des données vraiment complexes que le titre implique.

accès dynamique à l'objet multi-niveaux.

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 /

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"]

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

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

pour ajouter à ceci, accéder aux tableaux imbriqués se produirait comme ceci:

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 /

Un pythonic, récursive et approche fonctionnelle de démêler arbitraire JSON arbres:

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)

où data est une liste python (tirée 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']}
]

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>

juste au cas où, n'importe qui visitant cette question en 2017 ou plus tard et à la recherche d'un facile à se rappeler façon, voici un poste de blog élaboré sur L'accès à des objets imbriqués dans JavaScript sans être embobiné par

ne peut pas lire la propriété " foo "non définie error

1. Oliver Steele objet imbriqué modèle de l'accès

le plus facile et le façon la plus propre est d'utiliser Oliver Steele objet imbriqué modèle de l'accès

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

avec cette note, vous ne tomberez jamais sur

ne peut pas lire le " nom "de la propriété non définie .

vous essentiellement vérifier si l'utilisateur existe, sinon, vous créez un objet vide à la volée. De cette façon, la touche de niveau suivant sera toujours accessible à partir d'un objet qui existe ou d'un objet vide , mais jamais undefined.

2. Accéder Aux Objets Imbriqués En Utilisant Le Tableau Reduce

pour pouvoir accéder aux tableaux imbriqués, vous pouvez écrire votre propre tableau réduire 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 ya aussi un excellent type manipulation bibliothèque minimale typy qui fait tout cela pour vous.

L'utilisation de lodash serait une bonne solution

Ex:

var object = { 'a': { 'b': { 'c': 3 } } };                                                                                               
_.get(object, 'a.b.c');                                                                                             
// => 3