Pregunta Encontrar objeto por id en una matriz de objetos de JavaScript


Tengo una matriz:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

No puedo cambiar la estructura de la matriz. Me están pasando una identificación de 45y quiero obtener 'bar' para ese objeto en la matriz.

¿Cómo hago esto en JavaScript o usando jQuery?


1104
2017-09-09 15:42


origen


Respuestas:


Utilizar el find() método:

myArray.find(x => x.id === '45').foo;

De MDN:

los find() método devuelve un valor en la matriz, si un elemento en la matriz satisface la función de prueba proporcionada. De otra manera undefined es regresado.


Si quieres encontrar su índice en cambio, usa findIndex():

myArray.findIndex(x => x.id === '45');

De MDN:

los findIndex() método devuelve el índice del primer elemento en la matriz que satisface la función de prueba proporcionada. De lo contrario, se devuelve -1.


Si desea obtener una matriz de elementos coincidentes, use la filter() método en su lugar:

myArray.filter(x => x.id === '45');

Esto devolverá una matriz de objetos. Si quieres obtener una variedad de foo propiedades, puede hacer esto con el map() método:

myArray.filter(x => x.id === '45').map(x => x.foo);

Nota al margen: métodos como find() o filter()y funciones de flecha no son compatibles con navegadores más antiguos (como IE), por lo que si desea admitir estos navegadores, debe transpilar su código usando Babel (con el polyfill)


427
2018-02-14 21:11



Como ya está usando jQuery, puede usar grep función que está destinada a buscar una matriz:

var result = $.grep(myArray, function(e){ return e.id == id; });

El resultado es una matriz con los elementos encontrados. Si sabes que el objeto siempre está ahí y que solo ocurre una vez, puedes usar result[0].foo para obtener el valor De lo contrario, debe verificar la longitud de la matriz resultante. Ejemplo:

if (result.length == 0) {
  // not found
} else if (result.length == 1) {
  // access the foo property using result[0].foo
} else {
  // multiple items found
}

1420
2017-09-09 15:54



Otra solución es crear un objeto de búsqueda:

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

Esto es especialmente interesante si necesita hacer muchas búsquedas.

Esto no necesitará mucha más memoria ya que los ID y los objetos serán compartidos.


343
2017-09-09 15:50



ECMAScript 2015 proporciona el encontrar() método en matrices:

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

Funciona sin bibliotecas externas. Pero si quieres soporte de navegador anterior es posible que desee incluir este polyfill.


146
2018-02-10 22:32



Underscore.js tiene un buen método para eso:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })

138
2017-11-22 12:52



Creo que la manera más fácil sería la siguiente, pero no funcionará en Internet Explorer 8 (o anterior):

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property

123
2017-09-09 15:46



Pruebe lo siguiente

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}

64
2017-09-09 15:45