Filter Object Arrays Based on Attributes in JavaScript

Filter Object Arrays Based on Attributes in JavaScript

  1. General Call-Back Function to Filter an Object Array Based on Attributes in JavaScript
  2. Use Arrow Function to Filter an Object Array Based on Attributes in JavaScript

The filter() method is the easiest way to grab a result of preference.

Other than that, you can loop through the entire object array and declare conditions explicitly. Technically, the less-code and easy access technique is by the filter method.

Here, we will focus on two ways of using a filter on an object array. We will direct a call-back function to a variable or object to store the filtered result.

This call-back function will have the general structure of a function. Later, we will also try to solve the case with an arrow function and check if the outcome is similar.

General Call-Back Function to Filter an Object Array Based on Attributes in JavaScript

This demonstration will initialize an array with multiple attributes, aka key-value pairs. The strategy is to access the object first and then access the array.

Next, we will grab an attribute and apply a condition to it. When we use the filter method, the exact match upon the conditions will get filtered.

Let’s hop on to the code lines.

Code Snippet:

var feature = {
    'models': [{
        "name": "Raven",
        "age": "22",
        "height": "176",
        "gender": "Female",
        "hair": "Brown",
    },
    {
        "name": "Alex",
        "age": "23",
        "height": "185",
        "gender": "Male",
        "hair": "Black",
    },
    {
        "name": "Eden",
        "age": "25",
        "height": "169",
        "gender": "Female",
        "hair": "Black",
    }
  ]
}
var extract = feature.models.filter(function(el){
    return el.age<25 &&
    el.height>=170 ;
});
console.log(extract);

Output:

filter with normal function in javascript

Here, the feature.models.filter accesses the object and array accordingly. Also, the filter method is fired to put the constraints inside it.

As we can see, the age<25 && height>170 extracts the possible matched models detailing.

Use Arrow Function to Filter an Object Array Based on Attributes in JavaScript

An arrow function is a shorthand way of the normal function structure conventions. We will see if we can use an arrow function to filter an object array.

Code Snippet:

var feature = {
    'models': [{
        "name": "Raven",
        "age": "22",
        "height": "176",
        "gender": "Female",
        "hair": "Brown",
    },
    {
        "name": "Alex",
        "age": "23",
        "height": "185",
        "gender": "Male",
        "hair": "Black",
    },
    {
        "name": "Eden",
        "age": "25",
        "height": "169",
        "gender": "Female",
        "hair": "Black",
    }
  ]
}
var extract = feature.models.filter(x => x.age<25 && x.hair == "Black");
console.log(extract);

Output:

Filter with arrow function in javascript

According to the code above, filtering out the necessary result with an arrow function filter method is clearer.

This procedure only requires a variable (here x) to point out the attributes. Also, this coding style is used to shorten codes and issued by the latest ES6 convention.

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

Related Article - JavaScript Object

  • Search Objects From an Array in JavaScript
  • Find Object in Array by Property Value in JavaScript
  • Print Objects in JavaScript
  • JavaScript Destroy Object
  • JavaScript Destroy Object
  • Nested Objects in JavaScript
  • Related Article - JavaScript Array

  • Check if Array Contains Value in JavaScript
  • Create Array of Specific Length in JavaScript
  • Convert Array to String in JavaScript
  • Remove First Element From an Array in JavaScript
  • Search Objects From an Array in JavaScript
  • Convert Arguments to an Array in JavaScript
  • Related Article - JavaScript Attributes

  • Get Values of Data Attributes in JavaScript