I need to filter a two dimensional array in JS, I know there is the accumulator could you explain me how to do it please
let listItems = [
{
category: false,
items: [
{ value: 1, label: 'Disabled'},
{ value: 2, label: 'Carole Poland'},
{ value: 3, label: 'Wanda Howard'},
],
},
{
category: 'Suggestions',
items: [
{ value: 4, label: 'Robin Counts'},
{ value: 5, label: 'Alex Doe'},
],
},
{
category: 'Batiment',
items: [
{ value: 6, label: 'Vincent Howi'},
{ value: 7, label: 'Alex Zusk'},
],
}
];
Wanted result after filter by label ‘Alex’
let listItems = [
{ category: 'Batiment', items: [{ value: 7, label: 'Alex Zusk'}] },
{ category: 'Suggestions', items: [{ value: 5, label: 'Alex Doe'}] }
];
<input
type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Search.."
/>
function myFunction() {
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
console.log('Search :', filter);
}
https://jsfiddle.net/z03gjdpo/4/
>Solution :
- Using
Array#reduce, iterate over the array while updating a list. - In every iteration, using
Array#filterandString#includes, get items whose label includes the target string. If the latter exist, push a new object to the accumulator withcategoryand filtereditems.
const listItems = [
{
category: false,
items: [ { value: 1, label: 'Disabled'}, { value: 2, label: 'Carole Poland'}, { value: 3, label: 'Wanda Howard'} ]
},
{
category: 'Suggestions',
items: [ { value: 4, label: 'Robin Counts'}, { value: 5, label: 'Alex Doe'} ]
},
{
category: 'Batiment',
items: [ { value: 6, label: 'Vincent Howi'}, { value: 7, label: 'Alex Zusk'} ]
}
];
const target = 'Alex';
const filteredListItems = listItems.reduce((list, { category, items = [] }) => {
const filteredItems = items.filter(({ label }) => label.includes(target));
if(filteredItems.length > 0) { list.push({ category, items: filteredItems }); }
return list;
}, []);
console.log(filteredListItems);