In this article, we will discuss different ways to filter an array of objects in JavaScript. The operation of the filtering array involves generating a subset from the existing array elements.
In JavaScript, filter functionality on the array is achieved by using Array.filter() method along with a callback function where the filter criteria are defined. Every object that returns true for the callback function is included in the array returned by Array.filter() function.
// Filter() syntax for array of objects
const filtered_array = object_array.filter(
// Callback function
(item) => {
// Filter Condition
return item.property == filter_value;
}); 
We will consider an example of a shopping cart for mobile phones with properties of name, price, release_date, and inStock. The array of object representation in JavaScript is as follows:
const mobileCart = [{name: "iPhone 10", price: "$900", release_date: "2020-05-10", inStock: true},
{name: "Galaxy S11", price: "$800", release_date: "2020-10-23", inStock: true},
{name: "iPhone 8", price: "$600", release_date: "2018-06-03", inStock: false},
{name: "Pixel 4", price: "$700", release_date: "2020-03-11", inStock: true},
{name: "Galaxy M6", price: "$500", release_date: "2019-05-26", inStock: false}]The list of 5 ways to filter an array of objects by property value is:
- Filter by boolean property value
- FIlter by number property value
- Filter by string property value
- Filter by JS date property value
Filter by Boolean property value
A more direct approach would be to filter based on a boolean property value since the callback function of Array.filter() expects a boolean value. We simply need to return item.property_name for filtering the values or return !item.property_name to find the inverse array.
In the below example, we are finding the list of all mobiles in stock from mobileCart object based on the “inStock” property value. Additionally, we are obtaining an array of mobile out of stock by returning !item.inStock in the Array.filter() callback function.
// List of all mobiles with "inStock" property as true
const mobileInStock = mobileCart.filter((item) => item.inStock);
console.log(mobileInStock);
//[{name: "iPhone 10", price: "$900", ...
//{name: "Galaxy S11", price: "$800", ...
//{name: "Pixel 4", price: "$700", ... }]
// List of all mobiles with "inStock" property as false
const mobileOutStock = mobileCart.filter((item) => !item.inStock);
console.log(mobileOutStock);
//[{name: "iPhone 8", price: "$600", ...
//{name: "Galaxy M6", price: "$500", ... }]Filter by Number property value
If the data type of object property isn’t boolean, then a boolean value needs to be generated using JavaScript comparison operators like “==”, “=<, “>”, etc. Read more about JavaScript comparison operators from programiz.com/javascript/comparison-logical.
In the below example, we are finding the list of mobiles with “price” property value below “$600” by using the “<” operator. Further, we find a list of mobiles with “price” property value between “$500” and “$700” using “>=”, “<=” comparison operator and “&&” logical operator.
// List of mobiles below $600 price
const mobilesBelow600 = mobileCart.filter(
(item) => {
const price = Number(item.price.replace("$",""));
return price < 600;
});
console.log(mobilesBelow600)
// "[{inStock: false, name: "Galaxy M6",
// price: "$500", relese_date: "2019-05-26"}]
// List of mobiles between $500 and $700 price
const mobilesBetween500and700 = mobileCart.filter(
(item) => {
const price = Number(item.price.replace("$",""));
return price >= 500 && price <= 700 ;
});
console.log(mobilesBetween500and700)
//[{name: "iPhone 8", price: "$600", ...
//{name: "Pixel 4", price: "$700", ...
//{name: "Galaxy M6", price: "$500", ...]Filter by String property value
In order to filter based on string property values, we need to perform string operations such as search, compare, etc. Read more about string operations from developer.mozilla.org/JavaScript/String.
In the below example, we find the list of mobile objects with “Galaxy” in their “name” property using the String.search() operation. Next, we match mobile with the “iPhone 10” name using the “==” operator.
// Mobiles with "Galaxy" in their name property
const galaxyMobiles = mobileCart.filter(
(item) => {
const index = item.name.search("Galaxy");
return index != -1;
});
console.log(galaxyMobiles)
//[{name: "Galaxy S11", price: "$800", ...
//{name: "Galaxy M6", price: "$500", ...]
// Mobiles with name "iPhone 10"
const iPhone10Mobile = mobileCart.filter(
(item) => {
return item.name == "iPhone 10"
});
console.log(iPhone10Mobile)
//[{inStock: true, name: "iPhone 10"
,price: "$900", release_date: "2020-05-10}]Filter by JS date property value
To achieve Array.filter() on a property with a date value, we first need to parse the string value to JS Date object using new Date(String). Once the date is parsed, we can use comparator operators with another JS Date object or use JS Date method such as getFullYear, getMonth(), etc to compare based on month, year, etc. Read more about JS dates from developer.mozilla.org/JavaScript/Date
In the below example, we are finding mobiles with a release date before 2019 by parsing “release_date” and using getFullYear() method. Further, we find all the mobiles after “2020-05-30” by parsing dates and comparing values.
// List of mobile with release_date before year 2019
const mobileBefore2019 = mobileCart.filter(
(item) => {
const mobileRelease = new Date(item.release_date);
return mobileRelease.getFullYear() < 2019;
});
console.log(mobileBefore2019)
//[{inStock: false, name: "iPhone 8"
//price: "$600", release_date: "2018-06-03"}]
// mobiles with release_date after fromDate variable value
const fromDate = new Date("2020-05-30");
const mobileFromDate = mobileCart.filter(
(item) => {
const mobileDate = new Date(item.release_date);
return mobileDate > fromDate
});
console.log(mobileFromDate)
//[{inStock: true, name: "Galaxy S11",
//price: "$800", release_date: "2020-10-23}]
