Filter nested arrays using .filter() function

Question

I have an array that looks like this:

const data = [
 {"total": 24,"items":[{"id":1,"name":"foo1", "items": [{"label": "TEST", "total": 50}, {"label": "TEST2", "total": 50}]}]},
{"total": 25,"items":[{"id":2,"name":"foo2", "items": [{"label": "FOO", "total": 60}, {"label": "ANOTHER2", "total": 50}]}]},
{"total": 26,"items":[{"id":3,"name":"foo3", "items": [{"label": "BAR", "total": 70}, {"label": "LAST2", "total": 50}]}]},
];

and I wanted to use the .filter() function in angular so when I pass in the string '2', it returns the object containing only the nested arrays which contains the string '2', in other words should return this:

[
 {"total": 24,"items":[{"id":1,"name":"foo1", "items": [{"label": "TEST2", "total": 50}]}]},
{"total": 25,"items":[{"id":2,"name":"foo2", "items": [{"label": "ANOTHER2", "total": 50}]}]},
{"total": 26,"items":[{"id":3,"name":"foo3", "items": [{"label": "LAST2", "total": 50}]}]},
];

I tried

let values = data.items.filter(d => d.items.forEach(c => c.label.toLowerCase().includes(searchText.toLowerCase())
}))

and it just returns an empty array,

I also tried

 let values = data.items.forEach(d => d.items.filter(c => c.label.toLowerCase().includes(searchText.toLowerCase())
}))

and

let values = data.items.filter(d => d.items.every(c => c.label.toLowerCase().includes(searchText.toLowerCase())
}))

and both return undefined and an empty array.

what is the correct way to do this?

this is not an angular filter this is javascript Array Filter — Nabel
– Nabel, Commented Jul 8, 2021 at 18:59

Donald Duck · Accepted Answer · 2021-07-12 03:00:06Z

2

const data = [
 {"total": 24,"items":[{"id":1,"name":"foo1", "items": [{"label": "TEST", "total": 50}, {"label": "TEST2", "total": 50}]}]},
{"total": 25,"items":[{"id":2,"name":"foo2", "items": [{"label": "FOO", "total": 60}, {"label": "ANOTHER2", "total": 50}]}]},
{"total": 26,"items":[{"id":3,"name":"foo3", "items": [{"label": "BAR", "total": 70}, {"label": "LAST2", "total": 50}]}]},
];

let searchText='TEST'

let values =  JSON.parse(JSON.stringify(data)).map(d => {
d.items.map(i=> {
i.items = i.items.filter(c =>c.label.toLowerCase().includes(searchText.toLowerCase()));
return i;
})
return d;
})

console.log(values)

let values =  JSON.parse(JSON.stringify(data)).map(d => {
d.items.map(i=> {
i.items = i.items.filter(c =>c.label.toLowerCase().includes(searchText.toLowerCase()));
return i;
})
return d;
})

forEach doesn't return anything, map returns the array, where each element is replaced by the return value of from the function you pass to it.Also you weren't accessing deep enough, since your target array is at data[0].items[0].items, for example. I might have missed a parenthesis or bracket here

edited Jul 12, 2021 at 3:00

answered Jul 9, 2021 at 5:23

Donald Duck

6233 silver badges6 bronze badges

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

2 Comments

Aria Over a year ago

thank you so much for this! It works for the most part. I do have another question. so i sent a searchText 'AS' which should return only one of the items, but when I take off the s and just leave a, it should have three items, but it doesn't since its already mapped. why does that happen?

Donald Duck Over a year ago

Yeah good point, this is because javascript objects and arrays are pass by reference I've updated the solution to have a deep copy, so it no longer modifies the original data array.

Collectives™ on Stack Overflow

Filter nested arrays using .filter() function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related