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?

• Nabel: this is not an angular filter this is javascript Array Filter

Answer 1

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

• Aria: 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: 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.