¿Cómo puedo acceder y procesar objetos anidados, matrices o JSON?

Tengo una estructura de datos anidada que contiene objetos y matrices. ¿Cómo puedo extraer la información, es decir, acceder a valores específicos o múltiples (o claves)?

Por ejemplo:

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

¿Cómo puedo acceder nameal segundo elemento en items?

Preliminares

JavaScript tiene un solo tipo de datos que puede contener múltiples valores: Objeto . Una matriz es una forma especial de objeto.

(Normal) Los objetos tienen la forma

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

Las matrices tienen la forma

[value, value, ...]

Tanto las matrices como los objetos exponen una key -> valueestructura. Las claves en una matriz deben ser numéricas, mientras que cualquier cadena se puede usar como clave en los objetos. Los pares clave-valor también se denominan "propiedades" .

Se puede acceder a las propiedades utilizando la notación de puntos

const value = obj.someProperty;

o notación de paréntesis , si el nombre de la propiedad no sería un nombre de identificador de JavaScript válido ^{[especificación]} , o si el nombre es el valor de una 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];

Por esa razón, solo se puede acceder a los elementos de la matriz mediante la notación de paréntesis:

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

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

Espera ... ¿qué hay de JSON?

JSON es una representación textual de datos, al igual que XML, YAML, CSV y otros. Para trabajar con dichos datos, primero debe convertirse a tipos de datos de JavaScript, es decir, matrices y objetos (y cómo se explicó cómo trabajar con ellos). ¿Cómo analizar JSON se explica en la pregunta Parse JSON en JavaScript? .

Material de lectura adicional

Cómo acceder a matrices y objetos es un conocimiento fundamental de JavaScript y, por lo tanto, es recomendable leer la Guía de JavaScript de MDN , especialmente las secciones

• Trabajando con objetos
• Matrices
• JavaScript elocuente: estructuras de datos

Acceder a estructuras de datos anidados

Una estructura de datos anidados es una matriz u objeto que se refiere a otras matrices u objetos, es decir, sus valores son matrices u objetos. Se puede acceder a dichas estructuras aplicando consecutivamente la notación de punto o paréntesis.

Aquí hay un ejemplo:

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

Supongamos que queremos acceder nameal segundo elemento.

Así es como podemos hacerlo paso a paso:

Como podemos ver dataes un objeto, por lo tanto, podemos acceder a sus propiedades utilizando la notación de puntos. Se itemsaccede a la propiedad de la siguiente manera:

data.items

El valor es una matriz, para acceder a su segundo elemento, tenemos que usar la notación de paréntesis:

data.items[1]

Este valor es un objeto y usamos la notación de puntos nuevamente para acceder a la namepropiedad. Entonces eventualmente obtenemos:

const item_name = data.items[1].name;

Alternativamente, podríamos haber usado la notación de corchetes para cualquiera de las propiedades, especialmente si el nombre contenía caracteres que lo hubieran hecho inválido para el uso de la notación de puntos:

const item_name = data['items'][1]['name'];

Estoy tratando de acceder a una propiedad pero solo obtengo la undefineddevolución.

La mayoría de las veces cuando obtienes undefined, el objeto / matriz simplemente no tiene una propiedad con ese nombre.

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

Use console.logo console.dire inspeccione la estructura del objeto / matriz. La propiedad a la que está intentando acceder podría estar definida en un objeto / matriz anidado.

console.log(foo.bar.baz); // 42

¿Qué sucede si los nombres de las propiedades son dinámicos y no los conozco de antemano?

Si los nombres de las propiedades son desconocidos o si queremos acceder a todas las propiedades de un objeto / elementos de una matriz, podemos usar el bucle for...in ^[MDN] para los objetos y el for ^[MDN] bucle para que las matrices iteren sobre todas las propiedades / elementos.

Objetos

Para iterar sobre todas las propiedades de data, podemos iterar sobre el objeto así:

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
}

Dependiendo de dónde provenga el objeto (y qué desea hacer), es posible que deba probar en cada iteración si la propiedad es realmente una propiedad del objeto o si es una propiedad heredada. Puede hacer esto con Object#hasOwnProperty ^[MDN] .

Como alternativa a for...inwith hasOwnProperty, puede usar Object.keys ^[MDN] para obtener una matriz de nombres de propiedades :

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

Matrices

Para iterar sobre todos los elementos de la data.items matriz , usamos un forbucle:

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`.
}

También se podría usar for...inpara iterar sobre las matrices, pero hay razones por las cuales esto debe evitarse: ¿por qué es 'for (elemento var en la lista)' con las matrices consideradas una mala práctica en JavaScript? .

Con la creciente compatibilidad del navegador de ECMAScript 5, el método de matriz forEach ^{[MDN] también se} convierte en una alternativa interesante:

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

En entornos compatibles con ES2015 (ES6), también puede usar el bucle ^[MDN] , que no solo funciona para matrices, sino para cualquier iterable :for...of

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

En cada iteración, for...ofdirectamente nos da el siguiente elemento de la iterable, no hay "índice" para acceder o usar.

¿Qué pasa si la "profundidad" de la estructura de datos es desconocida para mí?

Además de las claves desconocidas, la "profundidad" de la estructura de datos (es decir, cuántos objetos anidados) tiene, también puede ser desconocida. La forma de acceder a propiedades profundamente anidadas generalmente depende de la estructura de datos exacta.

Pero si la estructura de datos contiene patrones repetitivos, por ejemplo, la representación de un árbol binario, la solución generalmente incluye acceder recursivamente ^[Wikipedia] a cada nivel de la estructura de datos.

Aquí hay un ejemplo para obtener el primer nodo hoja de un árbol binario:

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

Una forma más genérica de acceder a una estructura de datos anidados con claves y profundidad desconocidas es probar el tipo del valor y actuar en consecuencia.

Aquí hay un ejemplo que agrega todos los valores primitivos dentro de una estructura de datos anidados en una matriz (suponiendo que no contenga ninguna función). Si nos encontramos con un objeto (o matriz) simplemente llamamos toArraynuevamente a ese valor (llamada recursiva).

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

Ayudantes

Dado que la estructura de un objeto complejo o matriz no es necesariamente obvia, podemos inspeccionar el valor en cada paso para decidir cómo avanzar. console.log ^[MDN] y console.dir ^[MDN] nos ayudan a hacer esto. Por ejemplo (salida de la consola de Chrome):

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

Aquí vemos que data.itemses una matriz con dos elementos que son ambos objetos. En la consola de Chrome, los objetos pueden incluso expandirse e inspeccionarse de inmediato.

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

Esto nos dice que data.items[1]es un objeto, y después de expandirlo vemos que tiene tres propiedades id, namey __proto__. Esta última es una propiedad interna utilizada para la cadena prototipo del objeto. Sin embargo, la cadena de prototipos y la herencia están fuera del alcance de esta respuesta.

Puedes acceder de esta manera

data.items[1].name

o

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

Ambas formas son iguales.

En caso de que intente acceder a una itemestructura de ejemplo mediante ido name, sin conocer su posición en la matriz, la forma más fácil de hacerlo sería utilizar la biblioteca underscore.js :

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

Según mi experiencia, el uso de funciones de orden superior en lugar de foro for..inbucles da como resultado 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.

Los objetos y las matrices tienen muchos métodos integrados 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 unen el thisvalor léxicamente.

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

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

For-of loop le permite iterar elementos de la matriz. La sintaxis es for (const element of array)(podemos reemplazar constcon varo let, pero es mejor usarla constsi no pretendemos modificarla element).

La asignación de estructura 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 la [key, value]matriz a element, asignamos el primer elemento de esa matriz a keyy el segundo elemento a value. Es equivalente a esto:

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

Como puede ver, la desestructuración hace que esto sea mucho más simple.

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

El every()método se devuelve truesi la función de devolución de llamada especificada se devuelve truepara cada elemento de la matriz. El some()método se devuelve truesi la función de devolución de llamada especificada se devuelve truepara algún elemento (al menos uno).

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 find()métodos devuelven el primer elemento que satisface la función de devolución de llamada proporcionada. El filter()método devuelve una matriz de todos los elementos que satisface la función de devolución de llamada 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 map()método 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 reduce()método reduce una matriz a un solo valor llamando a la función de devolución de llamada proporcionada con dos elementos.

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 reduce()método toma un segundo parámetro opcional, que es el valor inicial. Esto es útil cuando la matriz en la que llama reduce()puede tener cero o uno elementos. Por ejemplo, si quisiéramos crear una función sum()que tome una matriz como argumento y devuelva la suma de todos los elementos, podríamos escribirla 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

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

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

Pero este no suele ser el caso con el complejo json. A medida que json se vuelve más complejo, los enfoques para encontrar valores dentro de json también se vuelven complejos. Un enfoque recursivo para navegar por el json es el mejor, y cómo se aprovecha esa recursión dependerá del tipo de datos que se busque. Si hay declaraciones condicionales involucradas, una búsqueda json 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 sabe que desea obtener el primer resultado de la matriz en el objeto, tal vez le gustaría usar

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

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

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 puede ser aplanado

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

Aquí se jsFiddle Demoestá utilizando uno de estos enfoques.

Esta pregunta es bastante antigua, como una actualización contemporánea. Con el inicio de ES2015, existen alternativas para obtener los datos que necesita. Ahora hay una característica llamada desestructuración de objetos para acceder a 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 secondNamedesde la nameclave desde una matriz llamada items, el solitario ,dice omitir el primer objeto en la matriz.

En particular, es probable que sea excesivo para este ejemplo, ya que el acceso simple a la matriz es más fácil de leer, pero resulta útil al separar 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 de Desestructuración de Mozilla para obtener más información.

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

Si ya conoce la ruta exacta, 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 no conoce el nombre exacto de antemano, o un usuario es quien le proporciona el nombre. Luego 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 forbucle, pero hay una manera muy simple de recorrer una ruta 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 tome el objeto con clave items, que resulta ser una matriz. Luego tome el 1elemento -st (0 arrays de índice). Por último, tome el objeto con clave nameen ese elemento de matriz, que resulta ser la cadena bar.

Si tiene un camino muy largo, incluso podría utilizarlo String.splitpara facilitar todo esto:

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

Esto es simplemente JavaScript, sin usar bibliotecas de terceros como jQuery o lodash.

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 despliegue 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 agregar a esto, el acceso a las matrices anidadas sucedería así:

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/

Otro documento más útil que describe la situación anterior: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

Acceso a la propiedad a través de dot walking: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

Puedes usar la lodash _getfunción:

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

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

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

entonces:

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

Por si acaso, cualquiera está visitando esta pregunta en 2017 o más tarde y está buscando una forma fácil de recordar , aquí hay una publicación de blog elaborada sobre Acceso a objetos anidados en JavaScript sin ser engañado por

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

1. 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 encontrarás

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

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

2. Acceda a objetos anidados utilizando la reducción de matriz

Para poder acceder a matrices anidadas, puede escribir su propia matriz para reducir la utilidad.

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 tipo excelente que maneja el tipo de biblioteca mínimo que hace todo esto por usted.

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

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

Acceder dinámicamente a objetos de múltiples niveles.

var obj = {
  name: "john doe",
  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/

Si está buscando uno o más objetos que cumplan ciertos criterios, tiene algunas opciones con 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 a singley a singleOrDefault, funcionan de manera similar firsty firstOrDefaultrespectivamente. La única diferencia es que lanzarán si se encuentra más de una coincidencia.

Para una explicación más detallada de query-js, puede comenzar con esta publicación

La forma de subrayar js

Que es una biblioteca de JavaScript que proporciona un montón de functional programmingayudantes útiles 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);
}

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

En caso de que ya esté usando lodash en su proyecto, creo que es una forma elegante de hacerlo 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 Opt 1 si le falta una de las propiedades (indefinida) en la ruta, no obtiene un error, le devuelve el tercer parámetro.

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

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

No creo que el interrogador solo se refiera a un objeto anidado de un nivel, así que presento la siguiente demostración para demostrar cómo acceder al nodo del objeto json profundamente anidado. Muy bien, busquemos 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>

Puede usar la sintaxis jsonObject.keypara acceder al valor. Y si desea acceder a un valor desde una matriz, puede usar la sintaxis jsonObjectArray[index].key.

Aquí están los ejemplos de código para acceder a varios valores para darle la idea.

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

        // if you want 'bar'
        console.log(data.items[1].name);

        // if you want array of item names
        console.log(data.items.map(x => x.name));

        // get the id of the item where name = 'bar'
        console.log(data.items.filter(x => (x.name == "bar") ? x.id : null)[0].id);

Enfoque dinámico

En la deep(data,key)función a continuación , puede usar una keycadena arbitraria , en su caso items[1].name(puede usar la notación de matriz [i]en cualquier nivel), si la clave no es válida, se devuelve indefinido.

let deep = (o,k) => 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);

// TEST

let key = 'items[1].name' // arbitrary deep-key

let data = {
    code: 42,
    items: [{ id: 11, name: 'foo'}, { id: 22, name: 'bar'},]
};

console.log( key,'=', deep(data,key) );

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 los datos son 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>

// const path = 'info.value[0].item'
// const obj = { info: { value: [ { item: 'it works!' } ], randominfo: 3 }  }
// getValue(path, obj)

export const getValue = ( path , obj) => {
  const newPath = path.replace(/\]/g, "")
  const arrayPath = newPath.split(/[\[\.]+/) || newPath;

  const final = arrayPath.reduce( (obj, k) => obj ?  obj[k] : obj, obj)
  return final;
}

En 2020, puede usar @ babel / plugin-offer-optional-chaining, es muy fácil acceder a valores anidados en un objeto.

 const obj = {
 foo: {
   bar: {
     baz: class {
   },
  },
 },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

https://github.com/tc39/proposal-optional-chaining

Mi stringdataproviene de un archivo PHP, pero aún así, indico aquí en var. Cuando tomo directamente mi json obj, no se mostrará nada, por eso pongo mi archivo json como

var obj=JSON.parse(stringdata); así que después de eso obtengo messageobj y muestro en el cuadro de alerta, obtengo datacuál es la matriz json y la almaceno en una variable, ArrObjluego leo el primer objeto de esa matriz con un valor clave como esteArrObj[0].id

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

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

                alert(ArrObj[0].id);

Usar lodash sería una buena solución

Ex:

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