Filter array of objects based on object’s property/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

Chrome	Edge	Firefox	Internet Explorer	Safari	Opera
Support since version 1	Support since version 12	Support since version 1.5	Support since version 9	Support since version 3	Support since version 9.5

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

Chrome	Edge	Firefox	Internet Explorer	Safari	Opera
Support since version 1	Support since version 12	Support since version 1	Support since version 3	Support since version 1	Support since version 3

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";
});