Filter array of objects based on object’s property/attributes?

I hope you enjoy reading this!
Don’t forget to share this blog with your friends.

Table of Contents
How to filter object array based on attributes

You can easily filter an Array of objects (or object Array) whatever based on object or based on object’s property/attributes? In both scenarios you should use .filter() method of core Javascript. E.g array.filter((child_obj) => if(child_obj.property == “property”))

How to filter an array of objects OR object Arrays?

.filter function

It’s the most convenient method to filter an array of objects, using .filter() function, Array.prototype.filter() is implemented in ECMAScript 5th Edition standard.

Support

ChromeEdgeFirefoxInternet ExplorerSafariOpera
Support since version 1Support since version 12Support since version 1.5Support since version 9Support since version 3Support since version 9.5
Javascript .filter Function Brower Support

Example #1

var students = [
    {
        _id: 7612980124398732,
        name: "Brian V. Blankenship",
        age: 14
    },
    {
        _id: 7612980124398732,
        name: "Holli J. Levinson",
        age: 18
    },
    {
        _id: 7612980124398732,
        name: "Moshe M. Baker",
        age: 19
    },
    {
        _id: 7612980124398732,
        name: "Cathy V. Ramsey",
        age: 16
    },
    {
        _id: 7612980124398732,
        name: "Daniel J. Singleton",
        age: 17
    }
]

var students_FilteredArray = students.filter((obj) =>  obj.age > 15);

Example #2

var fruits = [
    {
        name: "Apple",
        vitamin: "Vitamin A"
    },
    {
        name: "Brussels sprouts",
        vitamin: "Vitamin C"
    },
    {
        name: "Zucchini",
        vitamin: "vitamin B6"
    }
]

var fruits_FilteredArray = fruits.filter((obj) =>  obj.vitamin === "Vitamin A");

For loop

I personally prefer this way because usually we already loop the array so it’s better pratic to minimize the computation by running loop as few as possible.

Support

ChromeEdgeFirefoxInternet ExplorerSafariOpera
Support since version 1Support since version 12Support since version 1Support since version 3Support since version 1Support since version 3
Javascript for loop Brower Support

Example #1

var students = [
    {
        _id: 7612980124398732,
        name: "Brian V. Blankenship",
        age: 14
    },
    {
        _id: 7612980124398732,
        name: "Holli J. Levinson",
        age: 18
    },
    {
        _id: 7612980124398732,
        name: "Moshe M. Baker",
        age: 19
    },
    {
        _id: 7612980124398732,
        name: "Cathy V. Ramsey",
        age: 16
    },
    {
        _id: 7612980124398732,
        name: "Daniel J. Singleton",
        age: 17
    }
]

var students_FilteredArray = [];

for (let index = 0; index < students.length; index++) {
    if(students[index].age > 15) {
        students_FilteredArray.push(students[index]);
    }
}

Example #2

var fruits = [
    {
        name: "Apple",
        vitamin: "Vitamin A"
    },
    {
        name: "Brussels sprouts",
        vitamin: "Vitamin C"
    },
    {
        name: "Zucchini",
        vitamin: "vitamin B6"
    }
]

var fruits_FilteredArray = [];

for (let index = 0; index < fruits.length; index++) {
    if(fruits[index].vitamin === "Vitamin A") {
        fruits_FilteredArray.push(fruits[index]);
    }
}

Third-party libraries

Adding a third-party library for this specific work isn’t recommended but if you already using any JS library such as JQuery, Underscore.js, etc

JQuery

var fruits = [
    {
        name: "Apple",
        vitamin: "Vitamin A"
    },
    {
        name: "Brussels sprouts",
        vitamin: "Vitamin C"
    },
    {
        name: "Zucchini",
        vitamin: "vitamin B6"
    }
]

fruits = $.map(fruits, function(val, key) {
    if (val.vitamin === "Vitamin A"){
        return val;
    }
});

Underscore.js

var fruits = [
    {
        name: "Apple",
        vitamin: "Vitamin A"
    },
    {
        name: "Brussels sprouts",
        vitamin: "Vitamin C"
    },
    {
        name: "Zucchini",
        vitamin: "vitamin B6"
    }
]

var fruits_FilteredArray = _.filter (fruits, function(obj) {
    return obj.vitamin === "Vitamin A";
});

Leave a Comment

Your email address will not be published. Required fields are marked *

Get an AMAZING ARTICLE for FREE that cost me 100$
Get an AMAZING ARTICLE for FREE that cost me 100$
Get inside Data of your Industry for FREE
You are only 2 steps away from complete research-based data.
This site uses cookies to improve your user experience.