Filter array of object by nested array of object boolean property

Question

const Person = [
    {
        firstname: "john",
        lastname: "doe",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
        {
        firstname: "jane",
        lastname: "doe",
        items: [
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
    {
        firstname: "john",
        lastname: "adam",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
]

In the above array of Person objects, i have an array of items objects that has a property visible. I'm trying to filter Person object based on the visible field: true or false. The filtered Person object's items array of object will only hold true or false as well. How can I achieve this?

I have tried:

I tried:

const filteredPerson = Person.filter(person => {
    person.items.filter(item => item.visible === true)
})

The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into a minimal reproducible example. For more information, please see How to Ask and take the tour. — CertainPerformance
– CertainPerformance, Commented Dec 3, 2018 at 5:25

Mamun · Accepted Answer · 2018-12-03 05:47:49Z

2

Single filter() is enough here. Since the visible property in item is at 0 index you can use the that index:

const Person = [{firstname: "john",lastname: "doe",items: [{visible: true,foo: "bar"}]},{firstname: "jane",lastname: "doe",items: [{visible: false,foo: "bar"}]},{firstname: "john",lastname: "adam",items: [{visible: true,foo: "bar"}]}];

const filteredPerson = Person.filter(person => person.items[0].visible)
console.log(filteredPerson);

If the property index is not known then you have to use some() inside filter(). You can use map() to return the specific property from objects in the array:

const Person = [{firstname: "john",lastname: "doe",items: [{visible: true,foo: "bar"}]},{firstname: "jane",lastname: "doe",items: [{visible: false,foo: "bar"}]},{firstname: "john",lastname: "adam",items: [{visible: true,foo: "bar"}]}];

const filteredPerson = Person.filter(person => person.items.some(s =>s.visible)).map(p => ({items: p.items}));
console.log(filteredPerson);

edited Dec 3, 2018 at 5:47

answered Dec 3, 2018 at 5:30

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

blankface Over a year ago

What if its not on the first index?

blankface Over a year ago

Thanks. What if I want to only filter the items array based on true or false?

Mamun Over a year ago

@ZeroDarkThirty, do you mean only to get the item not other property as the result?

blankface Over a year ago

Yup just the array of items from each Property object, but still filtered by true/false.

Mamun Over a year ago

@ZeroDarkThirty, then you have to use map() to return only the items.. Updated the second answer....please check.

|

Nikhil Aggarwal · Accepted Answer · 2018-12-03 08:02:35Z

2

Use Array.some

const Person = [{firstname: "john",lastname: "doe",items: [{visible: true,foo: "bar"}]},{firstname: "jane",lastname: "doe",items: [{visible: false,foo: "bar"}]},{firstname: "john",lastname: "adam",items: [{visible: true,foo: "bar"}]}];
// Filters all those objects in Person array which has atleast one visible item
const result = Person.filter(v => v.items.some(o => o.visible));
console.log(result);

EDIT (Use nested Array.filter)

const Person = [{firstname: "john",lastname: "doe",items: [{visible: true,foo: "bar"},{visible: false,foo: "bar"}]},{firstname: "jane",lastname: "doe",items: [{visible: false,foo: "bar"}]},{firstname: "john",lastname: "adam",items: [{visible: true,foo: "bar"},{visible: false,foo: "bar"}]}];
// Filters all those objects in Person array which has atleast one visible item
const result = Person.filter(v => {
  const filteredItems = v.items.filter(o => o.visible);
  if(filteredItems.length) { // if there is any visible item
    v.items = filteredItems;
    return true;
  }
});
console.log(result);

edited Dec 3, 2018 at 8:02

answered Dec 3, 2018 at 5:26

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

5 Comments

blankface Over a year ago

I've updated my question with another scenario. now items has multiple objects, each with visible either true or false. how can i filter Person now, either by true OR false?

blankface Over a year ago

when you have this scenario, some doesn't filter the items array in the filtered Person array that gets returned.

blankface Over a year ago

This only works for true items. how do i do it for false?

Nikhil Aggarwal Over a year ago

@ZeroDarkThirty - Do you want to filter only those values where all the items in an object are either true or false?

Nikhil Aggarwal Over a year ago

@ZeroDarkThirty - Which also means that in the above example posted, the resulting array will have only 1 element with item having only 1 entry. As the other 2 elements in array will be ignored as in each of the items array there is a mixture of true and false entries

Collectives™ on Stack Overflow

Filter array of object by nested array of object boolean property

2 Answers 2

12 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related