How to Filter Objects in JavaScript?

October 29, 2022 | by Arround The Web | No comments

How to Filter Objects in JavaScript?

While programming in JavaScript, we often want to remove the repeated or invalid values contained in an object or delete the objects holding certain values. In such cases, filtering the objects in JavaScript can help to reduce the complexity and deleting the extra entries to make the code readable and understandable.

This blog will demonstrate the methods to filter objects in JavaScript.

How to Filter Object in JavaScript?

An object can be filtered in JavaScript by applying the “filter()” method:

With “search()” method
On “Object boolean values”
Based on the “condition”

Let’s check out each of the mentioned scenarios one by one!

Method 1: Filter Object in JavaScript by Applying filter() and search() Methods

The “filter()” method creates a new array of elements according to the applied condition. Whereas the “search()” method searches the specified string in an array. These methods can be used to search for a particular object value and filter it.

array.filter(function(current, index, arr), this)

In the given syntax, the “function” refers to the function that needs to be executed for each array item, and the argument values of the function refer to the “index” of the current element in an array and “this” is the value passed to the function.

string.search(value)

In the above syntax, the search() method searches for the “value” in the given string.

Example
Firstly, declare an array of objects with the “name” properties and corresponding values:

let objData = [{name: "Rock", id: "1", alive: true},
{name: "John", id: "2", alive: true},
{name: "David", id: "3", alive: false}]

After that, apply the filter() method on the value of the “alive” property in such a way that the object having the specified property’s boolean value as “false” will be filtered out from the array:

let objData= [{name: "Harry"},{name: "David"},{name: "Alisa"}]

Next, the “filter()” method will be applied having the value “item” as its argument which will be passed to the accessed objects array in such a way that the “search()” method will search for the specific object value “Harry” and filter it out using the former method:

let filterObj= objData.filter((item)=>item.name.search("Harry"))

Finally, the filtered objects will be displayed on the console:

console.log("The filtered objects are:", filterObj)

The corresponding output will be as follows:

It can be seen that the specified value is filtered out from the given array of objects.

Method 2: Filter Object in JavaScript by Applying filter() Method Based on the Object’s Boolean Values

The “filter()” method can similarly be utilized in this method to filter the objects by accessing their specific properties and filtering them based on the corresponding boolean values of the added properties.

Example
In the following example, we will similarly declare an array of objects holding a string, numeric, and boolean type properties and their corresponding values:

let objData = [{name: "Rock", id: "1", alive: true},
{name: "John", id: "2", alive: true},
{name: "David", id: "3", alive: false}]

After that, apply the filter() method on the value of the “alive” property in such a way that the object having the specified property’s boolean value as “false” will be filtered out from the array:

const filterObj = objData.filter((item) => item.alive);

As a result, the filtered objects having the boolean value “true” will be logged on the console:

console.log("The filtered objects are:", filterObj);

Output

Method 3: Filter Object in JavaScript by Applying filter() Method Based on Condition

In this particular method, we will utilize the “filter()” method to filter out a particular object property based on the added condition in its argument.

Look at the following example for demonstration.

Example
First, declare an array of objects as follows:

let objData = [{name: "Rock", id: "1", alive: true},
{name: "John", id: "2", alive: false},
{name: "David", id: "3", alive: false}]

Next, apply the “filter()” method on the “id” property of the objData in such a way that objects having id less than three will be stored in the “filterObj” and the remaining will get obsolete:

let filterObj = objData.filter((item) => item.id < 3);

Last, log the filtered objects satisfying the above condition on the console:

console.log("The filtered objects are:", filterObj);

In the given output, it can be observed that the objects are filtered out based on the value of “id” irrespective of the assigned boolean values.

We have discussed various methods to filter objects in JavaScript.

Conclusion

To filter objects in JavaScript, apply the “filter()” and “search()” methods in combination to search for the object’s value and filter it. Moreover, only the filter() can be utilized to filter out the property of an object based on the added conditions. This write-up has explained three methods to filter objects in JavaScript.

Source: linuxhint.com