{

Find an object by property in an array of objects javascript


javascript Find an object by property in array of objects example

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

let’s declare an array of objects and each object contains an 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

How to find an object by property in an array of objects using for loop in javascript

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 objects in an array
  • Each object is checked with the given key and value using the 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' }

How to find an object by property in an array of objects 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' }

How to find an object by property in an array of objects using javascript find a method

The array has the find method to return an object.

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

This is an example of the ES5 javascript version.

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

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

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

How to find an object by property in an array of objects using javascript 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.

How to find an object by property in an array of objects using jquery grep function

if you are using jquery in your application, it is very easy to filter an element with the 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 a 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' }

How to find an object by property in an array of objects using 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 a 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.