JavaScript Filter Array of Objects

While working with APIs or real world data, you often need to manipulate the data according to your needs. One of the most common tasks is to filter an array of objects based on some condition.

For this task, you can rely on the filter() method. It creates a new array by filtering out the elements of the original array that don't meet the condition specified in the callback function.

In this tutorial, you will learn how to filter an array of objects with various examples.

Filter Array of Objects

Before we start, let's have a quick look at the filter() method.

Syntax

array.filter(callback(element, index, array))

The filter() method takes a callback function as an argument. The callback function takes three arguments, the current element, the index of the current element and the array itself.

A new element is added to the new array if the callback function returns true for that element, otherwise it is not added to the new array.

Let's see an example and filter an array of objects based on some condition.

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 28 },
  { id: 4, name: 'David', age: 27 }
];

// filter users with age greater than 28
const filteredUsers = users.filter(user => user.age > 28);

console.log(filteredUsers);
// Output: [{ id: 2, name: 'Bob', age: 30 }]

We have filtered the array of objects based on the age of the users.

Filtering Based on Multiple Criteria

There might be a case when you need to filter the array of objects based on multiple criteria. Here is an example of filtering the array of objects based on multiple criteria.

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 28 },
  { id: 4, name: 'David', age: 27 }
];

// filter users with age greater than 28 and id greater than 2
const filteredUsers = users.filter(user => user.age > 25 && user.age < 30);

console.log(filteredUsers);
// Output: [
//   {"id":3,"name":"Charlie","age":28},
//   {"id":4,"name":"David","age":27}
// ]

Filtering with Dynamic Criteria

Sometimes, filtering criteria might vary based on user input or dynamic factors. For instance, filtering users by name:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 28 },
  { id: 4, name: 'David', age: 27 }
];

const userInput = 'Bob';
const filteredUsers = users.filter(user => user.name.toLowerCase() === userInput.toLowerCase());

console.log(filteredUsers);
// Output: [{"id":2,"name":"Bob","age":30}]

Here, we have filtered the array of objects based on the user input. The userInput variable can be set dynamically based on user input.

Advanced Filtering with Complex Objects

An array of object is often a complex structure. It might contain nested objects or arrays. Let's see how to filter an array of objects with complex structures.

const products = [
  { id: 1, name: 'Product A', price: 49.99, category: 'Electronics' },
  { id: 2, name: 'Product B', price: 29.99, category: 'Clothing' },
  { id: 3, name: 'Product C', price: 99.99, category: 'Electronics' },
  // ...more product objects
];

const minPrice = 30;
const maxPrice = 70;
const filteredProducts = products.filter(product => product.price >= minPrice && product.price <= maxPrice);

console.log(filteredProducts);

Filtering with Nested Objects

Let's see how to filter an array of objects with nested objects. For instance, filtering users based on their address.

Here, we will filter the users based on their city and state. We will use the address object to filter the users.

const users = [
  { id: 1, name: 'Alice', address: { city: 'New York', state: 'NY' } },
  { id: 2, name: 'Bob', address: { city: 'Los Angeles', state: 'CA' } },
  { id: 3, name: 'Charlie', address: { city: 'Chicago', state: 'IL' } },
  { id: 4, name: 'David', address: { city: 'San Francisco', state: 'CA' } }
];

// filter users from California (CA)
const filteredUsers = users.filter(user => user.address.state === 'CA');

console.log(filteredUsers);

Conclusion

With a deep understanding of the filter() method, you can easily filter an array of objects based on any criteria.

After going through multiple examples in this tutorial, you should be able to filter an array of objects.