How to Filter Object by Value in JavaScript Array

JavaScript offers a variety of methods and techniques to manipulate arrays and objects. One common task is filtering an array of objects based on the value of a specific attribute. This can be achieved by creating a new object that contains only the array elements that match the desired property value. Please see the following example of how to use the filter() method with a test function that returns a truthy value for the array item matching the given condition.

const items = [
  { name: "Apple", color: "Red", weight: 150 },
  { name: "Banana", color: "Yellow", weight: 120 },
  { name: "Grapes", color: "Purple", weight: 250 },
  { name: "Orange", color: "Orange", weight: 180 },
];
const weightFilteredItems = items.filter((item) => item.weight > 160);
console.info(weightFilteredItems);

An array of objects consists of multiple JavaScript objects, each with its properties. These properties can have different values, and we can specify which property we want to use for filtering. By examining the key value of each object in the array, we can create a new object that only includes the objects with the specified object values.

We need to iterate through each element to filter an array of objects and check if the property value matches our criteria. If it does, we include that element in the filtered array. This flow allows us to retrieve a subset of the original array that meets our requirements. By filtering an array of objects, we can easily retrieve the desired information without modifying the original array. This technique is beneficial when dealing with large datasets or analyzing complex data. JavaScript offers various methods and functions to implement this functionality effectively, allowing for efficient manipulation of arrays and objects.

In conclusion, filtering an array of objects based on attribute value using JavaScript involves creating a new array that includes only the elements that satisfy a specific property value.

Alternative Methods

There are alternative methods to filter objects instead of looking at an object by key equality.

Tailored Filter Function

Instead of looking for a specified value, we can tailor our filter functions by using a configuration object.

const items = [
  { name: "Apple", color: "Red", weight: 150 },
  { name: "Banana", color: "Yellow", weight: 120 },
  { name: "Grapes", color: "Purple", weight: 250 },
  { name: "Orange", color: "Orange", weight: 180 },
];

function createFilterFunction({ name, color, minWeight, maxWeight } = {) {
  return (item) => {
    if (name && name !== item.name) return false;
    if (color && color !== item.color) return false;
    if (minWeight && item.weight < minWeight) return false;
    if (maxWeight && item.weight > maxWeight) return false;
    return true;
  };
}

const weightFilteredItems = items.filter(createFilterFunction({ minWeight: 190 }));
console.info(weightFilteredItems);

The above code example uses optional named parameters and returns a custom filter function that filters the objects based on specified criteria. The return value is used in the filter() method.

Higher Order Filter Function

The most fascinating feature of JavaScript is passing functions to other functions as a parameter. I'm using this feature to develop the previous idea further to demonstrate a flexible filter function. First, please have a look at the below example.

const items = [
  { name: "Apple", color: "Red", weight: 150 },
  { name: "Banana", color: "Yellow", weight: 120 },
  { name: "Grapes", color: "Purple", weight: 250 },
  { name: "Orange", color: "Orange", weight: 180 },
];
function createFilterFunction(conditionFunctions) {
  return (item) => conditionFunctions.every((conditionFunction) => conditionFunction(item));
}
const weightFilteredItems = items.filter(createFilterFunction([
  (item) => item.name !== "Orange",
  (item) => item.weight > 130,
  (item) => !item.color.startsWith("R")
]));
console.info(weightFilteredItems);

The above code block can be written more straightforwardly, but I want to show you the idea. You can customize the functions heavily according to your needs. I used the createFilterFunction(), which expects an array object as a parameter to create a javascript filter function. The created function iterates over all the given functions and returns true if only all functions return a truthy value. Using this technique, we can provide many dynamic filters based on, for example, user input from a web form.

Conclusion

As you see, because The filter() function takes a function as an input, the filtering possibilities are endless, and JavaScript lets us use many alternative ways. If you have an idea, please share it below with the other readers.