How to Search For Object in Array of Objects in JavaScript

JavaScript developers often use array of literal objects to store data as key-value pairs. They allow you to store diverse types of data in a compact manner. You can easily convert it into JSON data and vice versa. Many times, you may need to search for one or more objects in an array of objects. This can be difficult to do for many beginner web developers, due to the complex structure of literal objects. But there are several powerful ways to look for one or more items in an array of objects. In this article, we will learn how to search for object in array of objects in JavaScript.

How to Search For Object in Array of Objects in JavaScript

Here are the different ways to search object in JavaScript array of objects.

1. Search One Object

In this case, we need to find only one object or object’s property from an array of objects.

Let us say you have the following array of objects.

array = [{'id':'1','name':'joe'},{'id':'2','name':'jane'}];

Let us say you want to search for object with id=2 in this array. You can easily do this using find() function.

function check_item(x) {
  return x.id === '2';
}

console.log(array.find(check_item)); // output is { id: '2', name: 'jane' }

Every JS array supports find() method out of the box. It returns the first element that satisfies a specific condition. It executes a test function for each item of the array and returns the first item that passes the test function. In our case, it executes check_item() function on each item of the array, and in this function it checks whether the id property of the item is 2.

You can also shorten the above code using an arrow function.

array.find(x => x.id === '2')

OR

console.log(array.find(x => x.id === '2'));  // output is { id: '2', name: 'jane' }

In each of the above case, it returns the entire object in result.

Please note, if the searched item does not exist, then it will return undefined.

If you only want a specific property of an item, then you can specify it using dot notation as shown below.

Here is an example to get the name property’s value of object where id=2.

console.log(array.find(x => x.id === '2')).name;  // output is jane

Here is the above code using traditional function.

function check_item(x) {
  return x.id === '2';
}

console.log(array.find(check_item).name);

Please note, if the searched item does not exist in this case, then it will throw an error saying ‘cannot read properties of undefined’. So when you are looking for a property of a specific item in array of objects, it is better to wrap the code in try..catch block to avoid errors.

try{
    console.log(array.find(x => x.id === '20').name);
}catch{
    console.log('item not found. so property does not exist');
}

If you want to get the index of a specific item, then you can use findIndex() function. It is similar to find() function, but it returns the index of the first matched item. Like find(), it will also execute a test function on each item of the array, but return the index of the first item that passes the test function.

function check_item(x) {
  return x.id === '2';
}

console.log(array.findIndex(check_item)); // output is 1

OR

console.log(array.findIndex(x => x.id === '2'));  // output is 1

If the searched item does not exist, it will return -1 as result.

console.log(array.findIndex(x => x.id === '20')); // output is -1

2. Search Multiple Objects

When you use find() or findIndex() function as shown above, it will stop searching once it finds the first matching item. Sometimes, there may be multiple instances of a given property. In this case, you need to use filter() function.

The main difference between find() and filter() is that find() function executes a test function for every item of the array until an element passes the test, but filter() function continues to execute the test function until it does so for all items of the array.

Its syntax is similar to that of find() function mentioned above. Let us say you have the following array, with multiple objects where id=2.

array = [{'id':'1','name':'joe'},{'id':'2','name':'jane'}, {'id':'2','name':'jim'}];

Here is how to search all objects where id=2.

function check_item(x) {
  return x.id === '2';
}

console.log(array.filter(check_item));  // output is [ { id: '2', name: 'jane' }, { id: '2', name: 'jim' } ]

You can shorten the above code by using arrow functions.

console.log(array.filter(x => x.id === '2'));  // output is [ { id: '2', name: 'jane' }, { id: '2', name: 'jim' } ]

3. Search Specific Properties

In the above case, we get an array of objects as a result of search. If you only want an array of specific properties of matching objects, then you need to use map() function along with filter() function as shown. Here is an example to return an array of name property of objects that match search criteria.

console.log(array.filter(x => x.id === '2').map(x => x.name));

Here is the output.

[ 'jane', 'jim' ]

This is very useful, if you have large objects or many instances of matching items, and are only looking for specific property of matching items.

4. Search for Multiple Conditions

So far, we have looked at searching for items using a single condition. If you want to search objects using multiple conditions, then you can combine conditions using && (AND)/ || (OR) operators. Let us say you have the following array of objects.

array = [{'id':'1','name':'joe'},{'id':'2','name':'jane'}, {'id':'2','name':'jim'}];

If you only want to look for first occurrence of an object, use find() function. If you want an array of all matching objects, use filter() function.

Here is an example to look for object where id=2 and name=’jim’.

console.log(array.find(x => x.id === '2' && x.name ==='jim')); // output is { id: '2', name: 'jim' }

Here is the above example using filter() function. Output will be an array.

console.log(array.filter(x => x.id === '2' && x.name ==='jim')); // output is [ { id: '2', name: 'jim' } ]

Here are the above examples using traditional functions, instead of arrow functions.

function check_item(x) {
  return x.id === '2' && x.name==='jim';
}

console.log(array.find(check_item)); // output is { id: '2', name: 'jim' }

OR

console.log(array.filter(check_item)); // output is [{ id: '2', name: 'jim' }]

Please note, in all above cases, we have used === operator. You can also use == operator instead.

Conclusion

In this article, we have learnt several different ways to search for object in array of objects in JavaScript. First, we learnt how to find single occurrence of an item in array of objects using find() function. Then we learnt how to get an array of matching items, using filter() function, in case there are multiple occurrences of matching objects. We also learnt how to get only the required property values of matching objects, instead of fetching the entire object, using map() function. Lastly, we learnt how to search objects based on multiple conditions using and/or operators. You can use any of these solutions, based on your requirements.

Also read:

How to Add New Elements to Beginning of Array
How to Get Unique Values in JavaScript Array
How to Copy Array in JavaScript