Find object by id in an array of JavaScript objects

ghz 1years ago ⋅ 7769 views

Question

I've got an array:

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

I'm unable to change the structure of the array. I'm being passed an id of 45, and I want to get 'bar' for that object in the array.

How do I do this in JavaScript or using jQuery?

Answer

Use the find() method:

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

From [MDN](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/find):

The find() method returns the first value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.

If you want to find its index instead, use findIndex():

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

From [MDN](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex):

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.

If you want to get an array of matching elements, use the [filter()](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method instead:

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

This will return an array of objects. If you want to get an array of foo properties, you can do this with the [map()](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method:

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

Side note: methods like find() or filter(), and [arrow functions](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) are not supported by older browsers (like IE), so if you want to support these browsers, you should transpile your code using Babel (with the polyfill).

#javascript