Procurar um objecto por id numa lista de objectos JavaScript
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]
Não consigo mudar a estrutura da matriz. Estou a receber uma identificação de 45
, e quero obter 'bar'
para esse objecto na matriz.
Como faço isto em JavaScript ou usando jQuery?
29 answers
Utilizar o método find()
:
myArray.find(x => x.id === '45').foo;
De MDN:
O método
find()
devolve um valor no array, se um elemento do array satisfizer a função de ensaio fornecida. Caso contrárioundefined
é devolvido.
Em vez disso, se quiser encontrar o seu índice, use findIndex()
:
myArray.findIndex(x => x.id === '45');
De MDN:
O método
findIndex()
devolve o índice do primeiro elemento da lista que satisfaz o indicado função de teste. Caso contrário, o-1 é devolvido.
Se quiser obter um conjunto de elementos correspondentes, use o filter()
método em vez disso:
myArray.filter(x => x.id === '45');
Isto vai devolver uma série de objectos. Se você quiser obter uma lista de propriedades foo
, você pode fazer isso com o map()
método:
myArray.filter(x => x.id === '45').map(x => x.foo);
Nota lateral: métodos como find()
ou filter()
, e funções de seta não são suportados por navegadores mais antigos (como o IE), por isso se quiser suportar estes navegadores, você deve transmitir o seu código usando Babel (com o polifill ).
Como já está a usar o jQuery, pode usar a função grep que se destina a procurar uma matriz:
var result = $.grep(myArray, function(e){ return e.id == id; });
O resultado é um array com os itens encontrados. Se você sabe que o objeto está sempre lá e que ele só ocorre uma vez, você pode apenas usar result[0].foo
para obter o valor. Caso contrário, você deve verificar o comprimento da matriz resultante. Exemplo:
if (result.length == 0) {
// not found
} else if (result.length == 1) {
// access the foo property using result[0].foo
} else {
// multiple items found
}
Outra solução é criar um objecto de pesquisa:
var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
lookup[array[i].id] = array[i];
}
... now you can use lookup[id]...
Isto é especialmente interessante se precisar de fazer muitas pesquisas.
Isto não vai precisar de muito mais memória, uma vez que os IDs e os objectos serão partilhados.
o ECMAScript 2015 fornece a procurar() método em matrizes:
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);
Sublinhado.js tem um bom método para isso:
myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })
var result = myArray.filter(function(v) {
return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property
Tenta o seguinte
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;
}
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
Uma versão genérica e mais flexível da função findById acima:
// 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');
Pode usar filtros,
function getById(id, myArray) {
return myArray.filter(function(obj) {
if(obj.id == id) {
return obj
}
})[0]
}
get_my_obj = getById(73, myArray);
Pode obter isto facilmente usando a função :
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";
Exemplo de Trabalho: http://jsfiddle.net/hunter/Pxaua/
Usando nativos Array.reduce
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)
});
Devolve o elemento objecto, se for encontrado, caso contrário false
No mundo real, se você está processando um monte de itens e desempenho é uma preocupação é muito mais rápido para inicialmente construir uma pesquisa:
var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var lookup = items.reduce((o,i)=>o[i.id]=o,{});
Você pode então chegar em itens em tempo fixo como este:
var bar = o[id];
Você também pode considerar usar um mapa em vez de um objecto como pesquisa: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map
Pode experimentar Sugarjs de http://sugarjs.com/.
Tem um método muito doce em matrizes. Então você pode encontrar um elemento como este:array.find( {id: 75} );
Você também pode passar um objeto com mais propriedades para adicionar outra "onde-cláusula".
Note que Sugarjs estende objetos nativos, e algumas pessoas consideram isso muito mau...
Com base na resposta aceite:
JQuery:
var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)
Ou CoffeeScript:
foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo
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'
Se fizer isto várias vezes, poderá configurar um mapa (ES6):
const map = new Map( myArray.map(el => [el.id, el]) );
Então você pode simplesmente fazer:
map.get(27).foo
Você pode fazer isto mesmo em JavaScript puro usando a função "Filtro" incorporada para arrays:
Array.prototype.filterObjects = function(key, value) {
return this.filter(function(x) { return x[key] === value; })
}
Então agora basta passar "id" no lugar de key
e "45" no lugar de value
, e você terá o objeto completo correspondente a um id de 45. Então isso seria ...
myArr.filterObjects("id", "45");
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
Iterate sobre qualquer item da matriz. Para cada item que visitar, verifique a identificação desse item. Se for compatível, devolve-o.
Se você só quer teh codez:
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
}
E a mesma coisa usando os métodos do 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];
}
Desde que o navegador Suporte ECMA-262 , 5ª Edição( Dezembro de 2009), isto deve funcionar, quase uma linha:
var bFound = myArray.some(function (obj) {
return obj.id === 45;
});
Utilizar Array.prototype.filter()
a função.
DEMONSTRAÇÃO: 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
}
}
];
Filtro
var getPerson = function(name){
return jsonObj.filter(function(obj) {
return obj.name === name;
});
}
Utilizar:
var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {
if (obj.id === '5') { // id.toString() if it is int
retObj = obj;
return false;
}
});
return retObj;
Deve devolver um objecto por identificação.
Esta solução também pode ajudar:
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");
Fiz como $.grep
e se um objecto é descobrir, a função irá devolver o objecto, em vez de uma matriz.
A partir da resposta de aggaton , esta é uma função que devolve de facto o elemento desejado( ou null
Se não for encontrado), dada a função array
e uma função callback
que devolve um valor truthy para o elemento "correcto":
function findElement(array, callback) {
var elem;
return array.some(function(e) {
if (callback(e)) {
elem = e;
return true;
}
}) ? elem : null;
});
Lembre-se apenas que isto não funciona nativamente no IE8 -, uma vez que não suporta some
. Um polifill pode ser fornecido, alternativamente há sempre o clássico laço for
:
function findElement(array, callback) {
for (var i = 0; i < array.length; i++)
if (callback(array[i])) return array[i];
return null;
});
É mais rápido e compacto. Mas se não quiseres reinventar a roda, sugiro usar uma biblioteca de utilidades como o underscore ou lodash.
Mais curto,
var theAnswerObj = _.findWhere(array, {id : 42});
Considere "axesOptions" como uma lista de objetos com um formato de objeto sendo {: field_type => 2,: campos => [1,3,4]}
function getFieldOptions(axesOptions,choice){
var fields=[]
axesOptions.each(function(item){
if(item.field_type == choice)
fields= hashToArray(item.fields)
});
return fields;
}
var data= [];
$.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}}
Ou
var data = $.grep(array, function( n, i ) {
return ( n !== 5 && i > 4 );
});
Usar a sintaxe ES6:
Array.find, Array.filter, Array.forEach, Array.map
Ou usar Lodash https://lodash.com/docs/4.17.10#filter, Sublinhado https://underscorejs.org/#filter
Usar o método do filtro de jQuery:
$(myArray).filter(function()
{
return this.id == desiredId;
}).first();
Que irá devolver o primeiro elemento com o Id indicado.
Ele também tem o benefício de um formato bonito C # LINQ.