Objetos de acceso / proceso (anidados), matrices o JSON

Se puede acceder de esta manera

data.items[1].name

O

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

Ambos caminos son iguales.

En caso de que esté tratando de acceder a un item desde la estructura de ejemplo por id o name, sin saber su posición en la matriz, la forma más fácil de hacerlo sería usar subrayado.js biblioteca:

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

Desde mi experiencia, usar funciones de orden superior en lugar de bucles for o for..in resulta en un código que es más fácil de razonar y, por lo tanto, más fácil de mantener.

Solo mis 2 centavos.

A veces, acceder a un objeto anidado usando una cadena puede ser deseable. El enfoque simple es el primer nivel, por ejemplo

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

Pero esto a menudo no es el caso con json complejo. A medida que json se vuelve más complejo, los enfoques para encontrar valores dentro del json también se vuelven complejos. Un enfoque recursivo para navegar por el json es el mejor, y cómo se aproveche esa recursividad dependerá del tipo de datos que se busquen. Si hay declaraciones condicionales involucradas, un json search puede ser una buena herramienta para usar.

Si la propiedad a la que se accede ya es conocida, pero la ruta es compleja, por ejemplo en este objeto

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

Y usted sabe que desea obtener el primer resultado de la matriz en el objeto, tal vez le gustaría utilizar

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

Sin embargo, eso causará una excepción ya que no hay ninguna propiedad de object con ese nombre. La solución para poder usar esto sería aplanar el aspecto de árbol del objeto. Esto se puede hacer recursivamente.

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

Ahora, el objeto complejo se puede aplanar

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

Aquí es un jsFiddle Demo de este enfoque se utiliza.

Objects and arrays tiene muchos métodos incorporados que pueden ayudarlo con el procesamiento de datos.

Nota: en muchos de los ejemplos estoy usando funciones de flecha. Son similares a las expresiones de función , pero enlazan el valor this léxicamente.

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

Object.keys() devuelve una matriz de claves del objeto, Object.values() devuelve una matriz de valores del objeto, y Object.entries() devuelve una matriz de las claves del objeto y los valores correspondientes en un formato [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() con un bucle for-of y asignación de desestructuración

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

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

Es muy conveniente iterar el resultado de Object.entries() con un bucle for-of y asignación de desestructuración.

El bucle For-of le permite iterar elementos de matriz. La sintaxis es for (const element of array) (podemos reemplazar const con var o let, pero es mejor usar const si no lo hacemos intención de modificar element).

La asignación de desestructuración le permite extraer valores de una matriz o un objeto y asignarlos a variables. En este caso const [key, value] significa que en lugar de asignar el array [key, value] a element, asignamos el primer elemento de ese array a key y el segundo elemento a value. Es equivalente a esto:

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

Como puedes ver, la desestructuración hace esto mucho más simple.

Array.prototype.every() y Array.prototype.some()

El every() method returns true if the specified callback function returns true for every element of the array. El método some() devuelve true si la función callback especificada devuelve true para algún elemento (al menos un).

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() y Array.prototype.filter()

Los métodos find() devuelven el primer elemento que satisface la función callback proporcionada. El método filter() devuelve un array de todos los elementos que satisfacen la función callback proporcionada.

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()

El método map() devuelve una matriz con los resultados de llamar a una función de devolución de llamada proporcionada en los elementos de la matriz.

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()

El método reduce() reduce una matriz a un solo valor llamando a la función de devolución de llamada proporcionada con dos elemento.

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

El método reduce() toma un segundo parámetro opcional, que es el valor inicial. Esto es útil cuando la matriz en la que se llama reduce() can tiene cero o uno elementos. Por ejemplo, si queremos crear una función sum() que toma una matriz como argumento y devuelve la suma de todos los elementos, podríamos escribir así:

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

Esta pregunta es bastante antigua, así como una actualización contemporánea. Con el inicio de ES2015 hay alternativas para obtener los datos que necesita. Ahora hay una característica llamada objeto de desestructuración para acceder a los objetos anidados.

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

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

console.log(secondName);

El ejemplo anterior crea una variable llamada secondName a partir de la clave name de un array llamado items, el solitario , dice omitir el primer objeto del array.

En particular, probablemente es excesivo para este ejemplo, como simple array acccess es más fácil de leer, pero es útil cuando se rompen objetos en general.

Esta es una introducción muy breve a su caso de uso específico, la desestructuración puede ser una sintaxis inusual para acostumbrarse al principio. Recomiendo leer La documentación de Asignación Desestructuring de Mozilla para obtener más información.

Usar JSONPath sería una de las soluciones más flexibles si está dispuesto a incluir una biblioteca: https://github.com/s3u/JSONPath (nodo y navegador)

Para su caso de uso la ruta json sería:

$..items[1].name

Así que:

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

Prefiero jQuery. Es más limpio y fácil de leer.

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

Para acceder a un atributo anidado, debe especificar su nombre y luego buscar a través del objeto.

Si ya conoce la ruta exacta, entonces puede codificarla en su script de la siguiente manera:

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

Estos también funcionan -

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

Cuando usted no sabe el nombre exacto de antemano, o un usuario es el que proporciona el nombre para usted. A continuación, se requiere una búsqueda dinámica a través de la estructura de datos. Algunos sugirieron aquí que la búsqueda se puede hacer usando un bucle for, pero hay una manera muy sencilla de atravesar un camino usando 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)

La ruta es una forma de decir: Primero toma el objeto con key items, que resulta ser un array. Luego tome el elemento 1-st (matrices de índice 0). Por último, tome el objeto con clave name en ese elemento de matriz, que pasa a ser la cadena bar.

Si tienes un camino muy largo, incluso puedes usar String.split para hacer todo esto más fácil -

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

Esto es simplemente JavaScript, sin usar ningún librerías de terceros como jQuery o lodash.

Si está buscando uno o más objetos que cumplan con ciertos criterios, tiene algunas opciones usando 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:""});

También hay un single y un singleOrDefault funcionan como first y firstOrDefault respectivamente. La única diferencia es que lanzarán si más de un partido se encuentra.

Para mayor explicación de query-js puede comenzar con este post

Puedes usar la función lodash _get:

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

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

La forma de subrayado js

Que es una biblioteca JavaScript que proporciona un montón de útiles ayudantes functional programming sin extender ningún objeto incorporado.

Solución:

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

No creo que el interrogador solo se refiera a un objeto anidado de nivel, por lo que presento la siguiente demostración para demostrar cómo acceder al nodo del objeto json profundamente anidado. Bien, vamos a encontrar el nodo con 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>

Vieja pregunta pero como nadie mencionó lodash (solo subrayado).

En caso de que ya esté utilizando lodash en su proyecto, creo que una forma elegante de hacer esto en un ejemplo complejo:

Opt 1

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

Igual que:

Opt 2

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

La diferencia entre la primera y la segunda opción es que en el Opt 1 si tiene una de las propiedades faltantes (indefinidas) en la ruta no obtiene un error, le devuelve la tercera parámetro.

Para el filtro de matriz lodash tiene _.find() pero prefiero usar el filter() regular. Pero sigo pensando que el método anterior _.get() es súper útil cuando se trabaja con datos realmente complejos. Me enfrenté en el pasado API realmente complejas y fue útil!

Espero que pueda ser útil para quien está buscando opciones para manipular datos realmente complejos que el título implica.

Accediendo dinámicamente a objetos de varios niveles.

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

Violín de trabajo: 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"

O

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

Básicamente, use un punto entre cada descendiente que se despliega debajo de él y cuando tenga nombres de objetos hechos de dos cadenas, debe usar la notación ["obj Name"]. De lo contrario, solo un punto sería suficiente;

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

Para añadir a esto, el acceso a los arrays anidados sucedería de la siguiente manera:

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"

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

Un enfoque pitónico, recursivo y funcional para desentrañar árboles JSON arbitrarios:

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)

Donde data es una lista de python (analizada a partir de una cadena de texto 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 función grep de jQuery le permite filtrar a través de una matriz:

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>

Por si acaso, cualquiera que visite esta pregunta en 2017 o más tarde y busque una forma fácil de recordar , aquí hay una elaborada publicación de blog sobre Acceder a Objetos Anidados en JavaScript sin ser engañado por

No se puede leer la propiedad ' foo ' de undefined error

1. El patrón de acceso a objetos anidados de Oliver Steele

La forma más fácil y limpia es usar el patrón de acceso a objetos anidados de Oliver Steele

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

Con esta notación, nunca te toparás con

No se puede leer la propiedad 'name' de undefined .

Básicamente se comprueba si el usuario existe, si no, se crea un objeto vacío sobre la marcha. De esta manera, la siguiente clave de nivel siempre se accederá desde un objeto que existe o desde un objeto vacío, pero nunca desde undefined.

2. Acceda A Objetos Anidados Usando Array Reduce

Para poder acceder a los arrays anidados, puede escribir su propio array reduce 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.

También Hay un excelente manejo de tipos minimal library typy que hace todo esto por usted.

Usar lodash sería una buena solución

Ex:

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