Find object by id in an array of JavaScript objects

Asked 2023-09-20 20:56:53 View 257,111

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?

Answers

Use the find() method:

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

From MDN:

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:

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() 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() method:

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

Side note: methods like find() or filter(), and 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).

Answered   2023-09-20 20:56:53

  • For multiple testing conditions would it therefore be something like: myArray.find(x => x.id === '45' && x.color == 'red').foo - anyone
  • For me, best answer so far. Doesn't need jQuery neither creating new auxiliar arrays. - anyone
  • filter actually has support back to IE9! - anyone
  • myArray.find(x => x.id === '45').foo; throws an exception if there is no object with an id of '45'. - anyone
  • Can I add multiple condition inside the find method? - anyone

As you are already using jQuery, you can use the grep function which is intended for searching an array:

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

The result is an array with the items found. If you know that the object is always there and that it only occurs once, you can just use result[0].foo to get the value. Otherwise you should check the length of the resulting array. Example:

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

Answered   2023-09-20 20:56:53

  • It'd be safer to use === instead of ==, to avoid weird issues with JavaScript's == operator. - anyone
  • @VickyChijwani: Are there any issues when comparing a string to a string? - anyone
  • Well, if you're absolutely sure that both e.id and id will be strings, I suppose it's ok to use ==. But if you're not sure, you might face problems (since '' == 0 is true but '' === 0 is false). Not to mention === seems to be faster (stackoverflow.com/questions/359494/…). - anyone
  • Basically I always use === because it works exactly like == in other programming languages. I consider == to be non-existent in JavaScript. - anyone
  • @de. Many answers here provide the intended behavior when looking up unique values; you can essentially recognize them by the fact that they return or break from their loop early (or instruct a lower-level construct to stop iterating). See JaredPar's answer for a canonical example, and Aaronius's comment on that answer for the same insight. In general, people differentiate between "filter" and "find" functions in this way, but terminology varies. Though more efficient, this is still a linear search, so if you want to use a hash table, see Aaron Digulla's answer (beware of impl. details). - anyone

Another solution is to create a lookup object:

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

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

This is especially interesting if you need to do many lookups.

This won't need much more memory since the IDs and objects will be shared.

Answered   2023-09-20 20:56:53

  • Exactly what I was looking for. Funny how I was trying to over-complicate it by trying to loop through each time, removing each item from the list as I found it when I only needed to mutate the received data from CouchDB and get it into a format that is useful for my needs. +1 sir! - anyone
  • this is smart. I can't imagine how others were convinced by looking all over the array for each use. - anyone
  • As long as you don't rely on the order of properties: stackoverflow.com/questions/4886314/… - anyone
  • Is using a break; in the loop a good option / improvement if you know there is only one object to find ? - anyone
  • @irJvV: No, that doesn't make sense at all. The code above is useful if you need to do many lookups. If you look just once, then creating a lookup object is a waste of time. - anyone

ECMAScript 2015 (JavaScript ES6) provides the find() method on 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);

It works without external libraries. But if you want older browser support you might want to include this polyfill.

Answered   2023-09-20 20:56:53

  • Probably cause it still seems very experimental and not many browsers support it, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - anyone
  • This can be simplified to myArray.find(d=>d.id===45).foo;. - anyone
  • @Shaggy or even myArray.find(({ id }) => id === 45).foo. But this is an old answer that was written before ES2015 syntax was as well supported as now. @Gothdo’s answer is currently the most up to date in the thread. - anyone
  • @Shaggy if the .find() returns undefined, then your optimization throws an error. So this solution is can be used only in cases where a match is guaranteed. - anyone
  • @HerbertPeters If you want to be sure you can alway null-check, which will be really easy with optional chaining: myArray.find(d => d.id === 45)?.foo. - anyone

Underscore.js has a nice method for that:

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

Answered   2023-09-20 20:56:53

  • For the record, Lo-Dash (which is often demonstrably more performant than Underscore) has a similar method. Docs here: lodash.com/docs#find - anyone
  • If you are expecting only one object, then using findWhere would be more efficient as after finding one result, the search would not go any further. - anyone
  • @Foreever From the docs of _.find: "The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list." - anyone

I think the easiest way would be the following, but it won't work on Internet Explorer 8 (or earlier):

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

Answered   2023-09-20 20:56:53

  • I'm curious, is there any performance advantage here compared to the usual for? - anyone
  • @Igor Zinov'yev: Yes, there certainly are performance impacts with those ES5 array tools. A separate function is executed for each element, so it won't be really fast compared to a direct for loop. - anyone
  • So you're saying that it would be slower? Also, it will always scan the whole array, as far as I can see, whereas the for loop will terminate on the first match. - anyone
  • If you need support for IE8, just drop this in: stackoverflow.com/questions/7153470/… - anyone
  • This code will throw an error if there's no element with that id - anyone

Try the following

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

Answered   2023-09-20 20:56:53

  • This wasn't worthy of its own answer, but in modern browsers this solution can be written as: jsfiddle.net/rwaldron/j3vST - anyone
  • If you're going for efficiency, note that this example is likely faster than using filter() (see Rick's example) since this one returns once it finds the first matching item whereas filter() continues running through the full array even after finding a match. This one also doesn't have the cost of creating an additional array or calling a function for each item. - anyone
  • @Rick, the most interesting thing about that answer is apparently you can add the firebug console to the output window in jsFiddle. This is so much better than logging and telling someone else to open the console to see the output. Awesome! - anyone
  • Since noone has mentioned it so far, I wanted to add that AngularJS also has a filter method. - anyone
  • @JaredPar stackoverflow.com/questions/44550439/… - anyone
myArray.filter(function(a){ return a.id == some_id_you_want })[0]

Answered   2023-09-20 20:56:53

A generic and more flexible version of the findById function above:

// 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');

Answered   2023-09-20 20:56:53

Performance

Today 2020.06.20 I perform test on MacOs High Sierra on Chrome 81.0, Firefox 77.0 and Safari 13.1 for chosen solutions.

Conclusions for solutions which use precalculations

Solutions with precalculations (K,L) are (much much) faster than other solutions and will not be compared with them - probably they are use some special build-in browser optimisations

  • surprisingly on Chrome and Safari solution based on Map (K) are much faster than solution based on object {} (L)
  • surprisingly on Safari for small arrays solution based on object {} (L) is slower than traditional for (E)
  • surprisingly on Firefox for small arrays solution based on Map (K) is slower than traditional for (E)

Conclusions when searched objects ALWAYS exists

  • solution which use traditional for (E) is fastest for small arrays and fast for big arrays
  • solution using cache (J) is fastest for big arrays - surprisingly for small arrays is medium fast
  • solutions based on find (A) and findIndex (B) are fast for small arras and medium fast on big arrays
  • solution based on $.map (H) is slowest on small arrays
  • solution based on reduce (D) is slowest on big arrays

enter image description here

Conclusions when searched objects NEVER exists

  • solution based on traditional for (E) is fastest on small and big arrays (except Chrome-small arrays where it is second fast)
  • solution based on reduce (D) is slowest on big arrays
  • solution which use cache (J) is medium fast but can be speed up if we save in cache also keys which have null values (which was not done here because we want to avoid unlimited memory consumption in cache in case when many not existing keys will be searched)

enter image description here

Details

For solutions

  • without precalculations: A B C D E F G H I J (the J solution use 'inner' cache and it speed depend on how often searched elements will repeat)
  • with precalculations K L

I perform four tests. In tests I want to find 5 objects in 10 loop iterations (the objects ID not change during iterations) - so I call tested method 50 times but only first 5 times have unique id values:

  • small array (10 elements) and searched object ALWAYS exists - you can perform it HERE
  • big array (10k elements) and searched object ALWAYS exist - you can perform it HERE
  • small array (10 elements) and searched object NEVER exists - you can perform it HERE
  • big array (10k elements) and searched object NEVER exists - you can perform it HERE

Tested codes are presented below

function A(arr, id) {
  return arr.find(o=> o.id==id);
}

function B(arr, id) {
  let idx= arr.findIndex(o=> o.id==id);
  return arr[idx];
}

function C(arr, id) {
  return arr.filter(o=> o.id==id)[0];
}

function D(arr, id) {
  return arr.reduce((a, b) => (a.id==id && a) || (b.id == id && b));
}

function E(arr, id) {
  for (var i = 0; i < arr.length; i++) if (arr[i].id==id) return arr[i];
  return null;
}

function F(arr, id) {
  var retObj ={};
  $.each(arr, (index, obj) => {
    if (obj.id == id) { 
      retObj = obj;
      return false;
    }
  });
  return retObj;
}

function G(arr, id) {
  return $.grep(arr, e=> e.id == id )[0];
}

function H(arr, id) {
  return $.map(myArray, function(val) {
    return val.id == id ? val : null;
  })[0];
}

function I(arr, id) {
  return _.find(arr, o => o.id==id);
}

let J = (()=>{
  let cache = new Map();
  return function J(arr,id,el=null) { 
    return cache.get(id) || (el=arr.find(o=> o.id==id), cache.set(id,el), el);
  }
})();

function K(arr, id) {
  return mapK.get(id)
}

function L(arr, id) {
  return mapL[id];
}



// -------------
// TEST
// -------------

console.log('Find id=5');

myArray = [...Array(10)].map((x,i)=> ({'id':`${i}`, 'foo':`bar_${i}`}));
const mapK = new Map( myArray.map(el => [el.id, el]) );
const mapL = {}; myArray.forEach(el => mapL[el.id]=el);



[A,B,C,D,E,F,G,H,I,J,K,L].forEach(f=> console.log(`${f.name}: ${JSON.stringify(f(myArray, '5'))}`));

console.log('Whole array',JSON.stringify(myArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

This snippet only presents tested codes

Example tests results for Chrome for small array where searched objects always exists

enter image description here

Answered   2023-09-20 20:56:53

  • This should be the correct answer. The performance should be an important criteria when it comes to looping. - anyone

As others have pointed out, .find() is the way to go when looking for one object within your array. However, if your object cannot be found using this method, your program will crash:

const myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
const res = myArray.find(x => x.id === '100').foo; // Uh oh!
/*
Error:
"Uncaught TypeError: Cannot read property 'foo' of undefined"
or in newer chrome versions:
Uncaught TypeError: Cannot read properties of undefined (reading 'foo')
*/

This can be fixed by checking whether the result of .find() is defined before using .foo on it. Modern JS allows us to do this easily with optional chaining, returning undefined if the object cannot be found, rather than crashing your code:

const myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
const res = myArray.find(x => x.id === '100')?.foo; // No error!
console.log(res); // undefined when the object cannot be found

Answered   2023-09-20 20:56:53

If you do this multiple times, you may set up a Map (ES6):

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

Then you can simply do a O(1) lookup:

map.get(27).foo

Answered   2023-09-20 20:56:53

You can get this easily using the map() function:

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";

Working example: http://jsfiddle.net/hunter/Pxaua/

Answered   2023-09-20 20:56:53

  • I forgot about the fact that jQuery's map automatically removes null elements. It sounds misleading to me and to the common concept of map, as the result is not of the same length of the original collection. - anyone

Using native 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)
});

returns the object element if found, otherwise false

Answered   2023-09-20 20:56:53

  • Just a note, Array.reduce is not supported in IE8 and under. - anyone

You can use filters,

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

get_my_obj = getById(73, myArray);

Answered   2023-09-20 20:56:53

  • @TobiasBeuving - The one using Array.find() is plain JS too and should stop on the first find so will be more efficient. - anyone

While there are many correct answers here, many of them do not address the fact that this is an unnecessarily expensive operation if done more than once. In an extreme case this could be the cause of real performance problems.

In the real world, if you are processing a lot of items and performance is a concern it's much faster to initially build a lookup:

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

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

you can then get at items in fixed time like this :

var bar = o[id];

You might also consider using a Map instead of an object as the lookup: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

Answered   2023-09-20 20:56:53

Recently, I have to face the same thing in which I need to search the string from a huge array.

After some search I found It'll be easy to handle with simple code:

Code:

var items = mydata.filter(function(item){
    return item.word.toLowerCase().startsWith( 'gk );
})

See https://jsfiddle.net/maheshwaghmare/cfx3p40v/4/

Serach from 20k strings

Answered   2023-09-20 20:56:53

Iterate over any item in the array. For every item you visit, check that item's id. If it's a match, return it.

If you just want 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
}

And the same thing using ECMAScript 5's Array methods:

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

Answered   2023-09-20 20:56:53

You may try out Sugarjs from http://sugarjs.com/.

It has a very sweet method on Arrays, .find. So you can find an element like this:

array.find( {id: 75} );

You may also pass an object with more properties to it to add another "where-clause".

Note that Sugarjs extends native objects, and some people consider this very evil...

Answered   2023-09-20 20:56:53

  • Well, it is evil, since it may happen that new EcmaScript versions may introduce new methods with the same name. And guess what, this is exactly what happened with find. My suggestion is that if you want to extend native prototypes, always use more specific names, leaving the simplest ones to future standard developments. - anyone
  • this comment is nearly 2 years old and today I would rather use lodash anyways. However if you want you can read about this topic on the sugarjs website. They take a good stand to your opinion: sugarjs.com/native - anyone
  • The op did specifically ask for a javascript or jquery solution - anyone

As long as the browser supports ECMA-262, 5th edition (December 2009), this should work, almost one-liner:

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

Answered   2023-09-20 20:56:53

  • Almost. bFound is just a boolean that is true iff an element satisfies the required condition. - anyone

Here's how I'd go about it in pure JavaScript, in the most minimal manner I can think of that works in ECMAScript 3 or later. It returns as soon as a match is found.

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'

Answered   2023-09-20 20:56:53

More generic and short

function findFromArray(array,key,value) {
        return array.filter(function (element) {
            return element[key] == value;
        }).shift();
}

in your case Ex. var element = findFromArray(myArray,'id',45) that will give you the whole element.

Answered   2023-09-20 20:56:53

We can use Jquery methods $.each()/$.grep()

var data= [];
$.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}}

or

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

use ES6 syntax:

Array.find, Array.filter, Array.forEach, Array.map

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

Answered   2023-09-20 20:56:53

Building on the accepted answer:

jQuery:

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

Or CoffeeScript:

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

Answered   2023-09-20 20:56:53

Use Array.prototype.filter() function.

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

FILTER

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

Answered   2023-09-20 20:56:53

  • how can I search within nested object ? Like pets= false should return two objects. - anyone
  • use .filter method on obj.info in nested loop. var getPerson = function(name){ return jsonObj.filter(function(obj) { return obj.info.filter(function(info) { return pets === false; }); }); } - anyone
  • you could use es6 style too imo... const filterData = jsonObj.filter(obj => obj.name === 'Alex') - anyone

You can do this even in pure JavaScript by using the in built "filter" function for arrays:

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

So now simply pass "id" in place of key and "45" in place of value, and you will get the full object matching an id of 45. So that would be,

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

Answered   2023-09-20 20:56:53

  • Don't modify objects you don't own. - anyone

Dynamic cached find

In this solution, when we search for some object, we save it in cache. This is middle point between "always search solutions" and "create hash-map for each object in precalculations".

let cachedFind = (()=>{
  let cache = new Map();
  return (arr,id,el=null) => 
    cache.get(id) || (el=arr.find(o=> o.id==id), cache.set(id,el), el);
})();


// ---------
// TEST
// ---------

let myArray = [...Array(100000)].map((x,i)=> ({'id':`${i}`, 'foo':`bar_${i}`}));

// example usage

console.log( cachedFind(myArray,'1234').foo );





// Benchmark

let bench = (id) => {
  console.time   ('time for '+id ); 
  console.log    ( cachedFind(myArray,id).foo );  // FIND
  console.timeEnd('time for '+id );
}

console.log('----- no cached -----');
bench(50000);
bench(79980);
bench(99990);
console.log('-----  cached   -----');
bench(79980); // cached
bench(99990); // cached

Answered   2023-09-20 20:56:53

I really liked the answer provided by Aaron Digulla but needed to keep my array of objects so I could iterate through it later. So I modified it to

	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

Answered   2023-09-20 20:56:53

  • Used same solution as fastest for finding items in array. But parseInt is redundant here. - anyone

Use:

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

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

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

It should return an object by id.

Answered   2023-09-20 20:56:53

  • you could shorten your code by using return obj.id === 5 ? obj : false; I use $.each a lot for iterating over arrays. - anyone
  • @marcel: That won't work. As returning false will end the loop, it would only find the object if it was the first item in the array. - anyone

This solution may helpful as well:

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");

I made it just like $.grep and if one object is find out, function will return the object, rather than an array.

Answered   2023-09-20 20:56:53

  • Don't modify objects you don't own. - anyone
  • @Gothdo I Agree. If someone didn't know function will return the object, rather than an array may get a mistake, but I think it depends on users. - anyone