How to Find Objects in Arrays With JavaScript

Arrays of objects are a great help if you need to store structured data in JavaScript, as frontend and backend JavaScript developers often do. I recently wrote a tutorial about storing objects in an array, and this tutorial is the logical progression of it.

Once you’ve stored objects in a JavaScript array, how can you search for them and extract the values of the key/value pairs that they contain? Read on if you want to find out, because that’s exactly what you and I are about to discuss.

Searching for Objects Within Arrays of Objects

Generally, there are three ways to search for objects in an array of objects in JavaScript. Depending on your web application’s needs, you can use the filter() method, the find() method, or the findIndex() method.

Now let’s dive deeper into each of these methods to understand exactly how each of them works and discuss how to make the most of them.

With the filter() Method

The filter() takes a testing function as an argument and creates a new array containing all the elements that pass the test within that function. If no elements pass, the resulting array is empty ([]).

Here’s an example:

// Declare array and populate it with data
const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Jim" }];

// Filter the array
const findById = users.filter(item => item.id === 2);

// Log result
console.log(findById); // [{ id: 2, name: "Jane" }]

The above example assumes you know the id property of the object. However, you can use the filter() method for any other property within your object, for example:

// Declare array and populate it with data
const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Jim" }];

// Filter the array
const findByName = users.filter(item => item.name === "Jane");

// Log result
console.log(findByName); // [{ id: 2, name: "Jane" }]

Used this way, the filter() method returns an array with all the objects that match your testing function.

However, you can drill down even further and get the value of only one property by appending your call with the index and the property of the element that you want to get. Here’s what this looks like:

console.log(users.filter(item => item.id === 1)[0].name) // John
console.log(users.filter(item => item.name === "John")[0].id) // 1

With the find() Method

The find() method returns the value of the first element in the array that satisfies the testing function. If no elements pass the test, it returns a value of undefined. (In contrast, the method creates an array with all the elements that pass, and returns an empty array if no elements pass.)

// Declare array and populate it with data
const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Jim" }];

// Filter the array
const findById = users.find(item => item.id === 2);

// Log result
console.log(findById); // { id: 2, name: "Jane" }

Here too, the criteria you use to find the object is completely up to you:

// Declare array and populate it with data
const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Jim" }];

// Filter the array
const findByName = users.find(item => item.name === "Jane");

// Log result
console.log(findByName); // { id: 2, name: "Jane" }

Getting the value of an individual property with the find() method, however, is different than with the filter() method. The find() method returns an object, not an array, so you need to reference the property and you don’t have to indicate an index. Here’s an example:

console.log(users.find(item => item.id === 2).name) // Jane
console.log(users.find(item => item.name === "Jane").id) // 2

With the findIndex() Method

The findIndex() method returns the index of the first element in the array that satisfies the testing function. If no elements pass the test, it returns -1. You can then use the index to reference the desired element as needed.

// Declare array and populate it with data
const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Jim" }];

// Find the index of the first element that passes the test
const index = users.findIndex(item => item.id === 2);

// Create an object out of that element's value
const result = users[index];

// Log result
console.log(result); // { id: 2, name: "Jane" }

In Summary

Thanks for reading this far!

I hope this tutorial helped you learn what you came here to learn. If you have any questions or would like to share tips and tricks of your own with the rest of this post’s readers, leave a reply below.

And if you take away one thing from this post, let it be this: In JavaScript, you can use the find(), filter(), and findIndex() methods to search for one or more objects within an array of objects. These methods are native, easy to read, and very performant.

As a golden rule, when you need to find the first matching element, you can use either the find() or findIndex() method. And if you need all matching elements within the array, you can use filter() method.