Procurar um objecto por id numa lista de objectos JavaScript

Tenho uma matriz.
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?

Author: thugsb, 2011-09-09

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ário undefined é 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 ).

 510
Author: Michał Perłakowski, 2018-09-01 10:09:54

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
}
 1425
Author: Guffa, 2016-05-15 22:26:01

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.
 346
Author: Aaron Digulla, 2011-09-09 15:50:09

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);
Funciona sem bibliotecas externas. Mas se você quiser suporte de navegador mais antigo Você pode querer incluir Este polifill .
 149
Author: Rúnar Berg, 2017-09-10 15:10:35

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' })
 139
Author: GijsjanB, 2012-11-22 12:52:21
Acho que a maneira mais fácil seria a seguinte, mas não funcionará no Internet Explorer 8 (ou antes):
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
Author: pimvdb, 2016-01-01 16:16:09

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;
}
 64
Author: JaredPar, 2011-09-09 15:45:04
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
 42
Author: Danilo Colasso, 2015-04-16 17:31:49

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');
 30
Author: will Farrell, 2012-07-13 20:34:26

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);
 13
Author: Joe Lewis, 2013-09-13 09:43:20

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/

 13
Author: hunter, 2016-01-01 15:30:19

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

 10
Author: laggingreflex, 2015-10-01 21:45:03
Embora haja muitas respostas corretas aqui, muitas delas não abordam o fato de que esta é uma operação desnecessariamente cara, se feita mais de uma vez. Num caso extremo, isto pode ser a causa de problemas reais de desempenho.

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

 9
Author: Tom, 2016-03-23 10:24:18

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

 4
Author: deepflame, 2016-01-01 15:32:12

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
 4
Author: mr.musicman, 2016-01-01 15:54:11
Eis como eu faria isso em JavaScript puro, da maneira mais mínima que consigo pensar que funciona no ECMAScript 3 ou mais tarde. Retorna assim que uma correspondência for encontrada.
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'
 4
Author: Dan W, 2017-03-18 10:55:52

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
 4
Author: Jonas Wilms, 2018-07-20 08:33:08

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");
 3
Author: kaizer1v, 2016-01-27 05:33:37
Gostei muito da resposta dada pelo Aaron Digulla, mas precisava de manter a minha matriz de objectos para poder passar por ela mais tarde. Então modifiquei-o 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
 2
Author: quincyaft, 2014-11-19 03:55:57

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];
}
 2
Author: Zirak, 2016-01-01 15:29:51

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;
});
 2
Author: aggaton, 2016-01-01 15:51:32

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;
    });
}
 2
Author: Sumit Ridhal, 2017-06-17 18:05:33

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.
 1
Author: volumexxx, 2016-01-01 15:32:55

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.

 1
Author: soytian, 2016-01-01 15:53:40

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.
 0
Author: MaxArt, 2017-05-23 10:31:39

Mais curto,

var theAnswerObj = _.findWhere(array, {id : 42});
 0
Author: Manu, 2015-01-03 03:52:31

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;
}
 0
Author: ramya, 2015-03-04 06:06:06
Podemos usar métodos Jquery $.um()/$.grep() 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

 0
Author: TLbiz, 2018-09-25 06:49:04

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.
 -5
Author: Tejs, 2011-09-09 15:47:27