especifico - lista de objetos javascript

Buscar objeto por ID en una matriz de objetos JavaScript

Question

Tengo una matriz:

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

No puedo cambiar la estructura de la matriz. Se me pasa una ID de 45 , y quiero obtener una ''bar'' para ese objeto en la matriz.

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

Answer 1

Usando Array.reduce nativo

var array = [ {''id'':''73'' ,''foo'':''bar''} , {''id'':''45'' ,''foo'':''bar''} , ];
var id = 73;

var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

devuelve el elemento de objeto si se encuentra, de lo contrario es false

Answer 2

A partir de la respuesta de aggaton , esta es una función que realmente devuelve el elemento deseado (o null si no se encuentra), dada la array y una función de callback que devuelve un valor verdadero para el elemento "correcto":

function findElement(array, callback) {
    var elem;
    return array.some(function(e) {
        if (callback(e)) {
            elem = e;
            return true;
        }
    }) ? elem : null;
});

Solo recuerda que esto no funciona de forma nativa en IE8, ya que no es compatible con some . Se puede proporcionar un polyfill, alternativamente, siempre existe el clásico for loop:

function findElement(array, callback) {
    for (var i = 0; i < array.length; i++)
        if (callback(array[i])) return array[i];
    return null;
});

En realidad es más rápido y más compacto. Pero si no quieres reinventar la rueda, te sugiero que utilices una biblioteca de utilidades como el guión bajo o el lodash.

Answer 3

Así es como lo haría en JavaScript puro, de la manera más mínima que se pueda imaginar que funcione en ECMAScript 3 o posterior. Vuelve tan pronto como se encuentra una coincidencia.

var getKeyValueById = function(array, key, id) {
    var testArray = array.slice(), test;
    while(test = testArray.pop()) {
        if (test.id === id) {
            return test[key];
        }
    }
    // return undefined if no matching id is found in array
    return;
}

var myArray = [{''id'':''73'', ''foo'':''bar''}, {''id'':''45'', ''foo'':''bar''}]
var result = getKeyValueById(myArray, ''foo'', ''45'');

// result is ''bar'', obtained from object with id of ''45''

Answer 4

Como ya está utilizando jQuery, puede usar la función grep , que está diseñada para buscar una matriz:

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

El resultado es una matriz con los elementos encontrados. Si sabe que el objeto siempre está allí y que solo ocurre una vez, puede usar el 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
}

Answer 5

Considere "axesOptions" como una matriz de objetos con un formato de objeto que es {: field_type => 2,: fields => [1,3,4]}

function getFieldOptions(axesOptions,choice){
  var fields=[]
  axesOptions.each(function(item){
    if(item.field_type == choice)
        fields= hashToArray(item.fields)
  });
  return fields;
}

Answer 6

Creo que la forma más sencilla 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

Answer 7

Esta solución puede ser útil también:

Array.prototype.grep = function (key, value) {
    var that = this, ret = [];
    this.forEach(function (elem, index) {
        if (elem[key] === value) {
            ret.push(that[index]);
        }
    });
    return ret.length < 2 ? ret[0] : ret;
};
var bar = myArray.grep("id","45");

Lo hice como $.grep y si se descubre un objeto, la función devolverá el objeto, en lugar de una matriz.

Answer 8

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

Answer 9

Iterar sobre cualquier elemento de la matriz. Para cada artículo que visite, verifique la identificación de ese artículo. Si es un partido, devuélvalo.

Si solo quieres el codigo:

function getId(array, id) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].id === id) {
            return array[i];
        }
    }
    return null; // Nothing found
}

Y lo mismo con los métodos de matriz de ECMAScript 5:

function getId(array, id) {
    var obj = array.filter(function (val) {
        return val.id === id;
    });

    // Filter returns an array, and we just want the matching item.
    return obj[0];
}

Answer 10

Más corto,

var theAnswerObj = _.findWhere(array, {id : 42});

Answer 11

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 necesitas hacer muchas búsquedas.

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

Answer 12

Podemos usar los métodos Jquery $ .each () / $. Grep () var data= []; $.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}} var data= []; $.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}}

o

var data = $.grep(array, function( n, i ) { return ( n !== 5 && i > 4 ); });

use la sintaxis ES6: Array.find, Array.filter, Array.forEach, Array.map

O use Lodash https://lodash.com/docs/4.17.10#filter , Underscore https://underscorejs.org/#filter

Answer 13

Puede hacer esto incluso en JavaScript puro mediante el uso de la función "filtro" incorporada para los arreglos:

Array.prototype.filterObjects = function(key, value) {
    return this.filter(function(x) { return x[key] === value; })
}

Así que ahora simplemente pase "id" en lugar de key y "45" en lugar de value , y obtendrá el objeto completo que coincide con un id de 45. Así que eso sería,

myArr.filterObjects("id", "45");

Answer 14

Puede probar Sugarjs desde http://sugarjs.com/ .

Tiene un método muy dulce en Arrays, .find . Para que puedas encontrar un elemento como este:

array.find( {id: 75} );

También puede pasar un objeto con más propiedades para agregar otra "cláusula where".

Tenga en cuenta que Sugarjs extiende los objetos nativos, y algunas personas consideran esto muy malo ...

Answer 15

Puedes obtener esto fácilmente usando la función map() :

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

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

Ejemplo de trabajo: http://jsfiddle.net/hunter/Pxaua/

Answer 16

Puedes usar filtros,

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);

Answer 17

Realmente me gustó la respuesta provista por Aaron Digulla, pero necesitaba mantener mi variedad de objetos para poder iterarla más tarde. Así que lo modifiqué para

 var indexer = {};
 for (var i = 0; i < array.length; i++) {
     indexer[array[i].id] = parseInt(i);
 }
 
 //Then you can access object properties in your array using 
 array[indexer[id]].property

Answer 18

Si bien hay muchas respuestas correctas aquí, muchas de ellas no abordan el hecho de que esta es una operación innecesariamente costosa si se realiza más de una vez. En un caso extremo, esto podría ser la causa de problemas reales de rendimiento.

En el mundo real, si está procesando una gran cantidad de elementos y el rendimiento es una preocupación, inicialmente es mucho más rápido crear una búsqueda:

var items = [{''id'':''73'',''foo'':''bar''},{''id'':''45'',''foo'':''bar''}];

var lookup = items.reduce((o,i)=>o[i.id]=o,{});

A continuación, puede obtener artículos en un tiempo fijo como este:

var bar = o[id];

También puede considerar usar un Mapa en lugar de un objeto como búsqueda: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 19

Si lo hace varias veces, puede configurar un Mapa (ES6):

const map = new Map( myArray.map(el => [el.id, el]) );

Entonces simplemente puedes hacer:

map.get(27).foo

Answer 20

Siempre que el navegador admita ECMA-262 , 5ª edición (diciembre de 2009), esto debería funcionar, casi de una sola línea:

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});

Answer 21

Sobre la base de la respuesta aceptada:

jQuery:

var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)

O CoffeeScript:

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo

Answer 22

Una versión genérica y más flexible de la función findById anterior:

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{''id'':''73'',''foo'':''bar''},{''id'':''45'',''foo'':''bar''}];
var result_obj = objectFindByKey(array, ''id'', ''45'');

Answer 23

Utilice el método find() :

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

Desde MDN :

El método find() devuelve un valor en la matriz, si un elemento de la matriz satisface la función de prueba provista. De lo contrario se devuelve undefined .

Si desea encontrar su índice en su lugar, use findIndex() :

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

Desde MDN :

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

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

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

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

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

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

Answer 24

Utilice el método de filtro de jQuery:

 $(myArray).filter(function()
 {
     return this.id == desiredId;
 }).first();

Eso devolverá el primer elemento con el ID especificado.

También tiene la ventaja de un buen formato de C # LINQ.

Answer 25

Utilice la función Array.prototype.filter() .

DEMO : https://jsfiddle.net/sumitridhal/r0cz0w5o/4/

JSON

var jsonObj =[
 {
  "name": "Me",
  "info": {
   "age": "15",
   "favColor": "Green",
   "pets": true
  }
 },
 {
  "name": "Alex",
  "info": {
   "age": "16",
   "favColor": "orange",
   "pets": false
  }
 },
{
  "name": "Kyle",
  "info": {
   "age": "15",
   "favColor": "Blue",
   "pets": false
  }
 }
];

FILTRAR

var getPerson = function(name){
    return jsonObj.filter(function(obj) {
      return obj.name === name;
    });
}

Answer 26

Utilizar:

var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {

        if (obj.id === ''5'') { // id.toString() if it is int

            retObj = obj;
            return false;
        }
    });
return retObj;

Debe devolver un objeto por id.

Answer 27

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

Answer 28

ECMAScript 2015 proporciona el método MDN en arrays:

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 desea un soporte de navegador más antiguo, es posible que desee incluir este polyfill .

Answer 29

myArray.filter(function(a){ return a.id == some_id_you_want })[0]