{

Find an object by property in an array of objects javascript


Javascript examples to find an object by key from an array of objects.

let’s declare an array of objects and each object contains id and name properties.

let emps = [{'id':'1','name':'john'},{'id':'2','name':'eric'}, 
{'id':'3','name':'mark'},
{'id':'4','name':'andrew'}]

There are multiple ways we use to search an array of objects for a given property value.

  • Javascript custom code

use javascript for loop

This example does not use any array methods to find an object from an array.

  • Function declares with an array and object key and value.
  • use for loop to iterate object in an array
  • Each object checked with the given key and value using equality operator(===)
  • if matched, returns an object, else Returns null

Here is an example

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

console.log(getObjectByKey(emps,'name','eric')) //{ id: '2', name: 'eric' }

ES6 findIndex method

ES6 provides a findIndex method in Array. It returns an index for the matched callback function.

Here is an example code

console.log(emps[emps.findIndex(item => item.name == 'eric')]) //{ id: '2', name: 'eric' }

use find a method

The array has the find method to return an object.

find method accepts callback function, checks for object value, and returns it.

This is an example with ES5 javascript version.

var output = emps.find(function(item) {
    return item.name === 'andrew'; 
});  
console.log(output)  // { id: '4', name: 'andrew' }

Also, above function rewrites using ES6 arrow functions with lesser code.

console.log(emps.find(item => item.id === '1')) //{ id: '1', name: 'john' }

use filter method

The array filter method does filter from the input array and returns the output as an array.

ES5 Array filter example

var output = emps.filter(function(item) {
    return item.name === 'mark'; 
}); 
console.log(output) //[ { id: '3', name: 'mark' } ]

ES6 Array filter example

let tempArray=emps.filter(item => item.id === '4');
console.log(tempArray)//[ { id: '4', name: 'andrew' } ]

console.log(emps.find(item => item.id === '1'))

As you saw the, find method returns a single object, and the filter method returns an array of objects.

jquery grep function

if you are using jquery in your application, it is very easy to filter an element with grep method.

var output = $.grep(emps, function(item){ return item.id == 3; });
console.log(output)// { id: '3', name: 'mark' } 

Similarly, With the map method in jquery, iterates an array of objects with callback and returns matched objects in the array.

var tempArray = $.map(emps, function(element) {
    return element.id == 3 ? element : null;
});
console.log(tempArray)// { id: '3', name: 'mark' } 

Underscore find a method

Similarly, the Underscore library provides a find method.

If you use the underscore library, finding an object from the array is straightforward.

It provides the findWhere method which accepts an array and an object that contains key and value.

var output = _.findWhere(emps, {id : 3}); 
console.log(output)// { id: '3', name: 'mark' } 

Similarly, It provides a find method.

output = _.find(emps, function(item) { return item.id == '3' }) 
console.log(output)// { id: '3', name: 'mark' } 
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.