Filter Array and Array within

Question

I'm trying to filter an array of objects based off a property and also filter an array of objects within. Can I use filter within a filter to loop through and reduce the second array?

Something like the following:

const menu = [
    {
        name: "Batman",
        showinMenu: true,
        categories: [
            {
                title: "Title 2",
                showinMenu: true,
            }
            ,
            {
                title: "Title 3",
                showinMenu: false,
            }
        ]
    },
    {
        name: "Superman",
        showinMenu: true,
        categories: [
            {
                title: "Test 2",
                showinMenu: true,
            }
            ,
            {
                title: "Test 3",
                showinMenu: false,
            }
        ]
    },
]

const Filtered = menu?.categories?.filter((category) => {
    category.categories?.filter((subcategory) => {
        return subcategory.showinMenu === true
    })
    return category.showinMenu === true
})

Expected output

[
        {
            name: "Batman",
            showinMenu: true,
            categories: [
                {
                    title: "Title 2",
                    showinMenu: true,
                }
            ]
        }
    ]

gmoniava · Accepted Answer · 2022-09-13 11:28:06Z

3

This is an immutable approach

const menu = [
    {
        name: "Batman",
        showinMenu: true,
        categories: [
            {
                title: "Title 2",
                showinMenu: true,
            }
            ,
            {
                title: "Title 3",
                showinMenu: false,
            }
        ]
    },
    {
        name: "Superman",
        showinMenu: true,
        categories: [
            {
                title: "Test 2",
                showinMenu: true,
            }
            ,
            {
                title: "Test 3",
                showinMenu: false,
            }
        ]
    },
]

let result = menu.filter(x=>x.showinMenu).map(y=>{
 
 return {...y,categories:y.categories.filter(t=>t.showinMenu)}

})

console.log(result)

answered Sep 13, 2022 at 11:28

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

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

Comments

Viktor Luft · Accepted Answer · 2022-09-13 11:29:10Z

0

You are not using the result of your second filter. This should do it:

const Filtered = menu?.categories?.filter((category) => {
    return category.showinMenu === true
}).map((category) => {
  if (!("categories" in category)) return category;
  const filteredCategories = category.categories.filter((subcategory) => {
    return subcategory.showinMenu === true
  });
  return { ...category, categories: filteredCategories };
});

answered Sep 13, 2022 at 11:29

Viktor Luft

9415 silver badges10 bronze badges

Comments

Avinash Verma · Accepted Answer · 2022-09-13 11:32:34Z

0

The inner filter will return a new array to stored somewhere so this won't work. Only outer filter will take effect in the final output.

The easiest way I can think of doing this will be to--

ans = []
for each obj in array:
   if(condition is true):
        clone this object and replace categories with filtered categories
        add this cloned object to ans array

answered Sep 13, 2022 at 11:32

Avinash Verma

744 bronze badges

Collectives™ on Stack Overflow

Filter Array and Array within

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related