I have got two arrays . I am filtering based groupKey with PubSidebar.
If I understand correctly you want to filter PubSidebar. Keeping values if they have a role of public or a value of whats included in the groupKey. If so this would be your function:
PubSidebar.filter(x => (x.role === 'public' || groupKey.includes(x.value));
If you want to run that on content as well we could pull it apart:
const filterByGroup = (x) => (x.role === 'public' || groupKey.includes(x.value));
let result = [];
for (let i = 0; i < PubSidebar.length; i++) {
const item = PubSidebar[i];
if (filterByGroup(item)) {
if (item.content) {
item.content = item.content.filter(filterByGroup);
}
result = [ ...result, item ];
}
}
Snippet:
let groupKey = ['oaDeal', 'Journals', 'Deposit']
const PubSidebar = [{
value: 'Dashboard',
role: 'public',
},
{
value: 'oaDeal',
role: 'private',
content: [{
role: 'private',
value: 'oaDeal',
}, ],
},
{
value: 'Journals',
role: 'public',
content: [{
role: 'private',
value: 'Journals',
},
{
role: 'private',
value: 'Token',
},
{
role: 'private',
value: 'policy',
},
{
role: 'private',
value: 'Deposit',
},
{
role: 'public',
value: 'test'
},
],
},
]
const filterByGroup = (x) => (x.role === 'public' || groupKey.includes(x.value));
let result = [];
for (let i = 0; i < PubSidebar.length; i++) {
const item = PubSidebar[i];
if (filterByGroup(item)) {
if (item.content) {
item.content = item.content.filter(filterByGroup);
}
result = [...result, item];
}
}
console.log(result);
apply filter
on array items and on content of each item.
const update = (data, keys) => {
const publicOrGroup = ({ role, value }) =>
role === "public" || keys.includes(value);
return data.filter(publicOrGroup).map(({ content = [], ...item }) => ({
...item,
content: content.filter(publicOrGroup)
}));
};
const groupKey = ["oaDeal", "Journals", "Deposit"];
const PubSidebar = [
{
value: "Dashboard",
role: "public"
},
{
value: "oaDeal",
role: "private",
content: [
{
role: "private",
value: "oaDeal"
}
]
},
{
value: "Journals",
role: "public",
content: [
{
role: "private",
value: "Journals"
},
{
role: "private",
value: "Token"
},
{
role: "private",
value: "policy"
},
{
role: "private",
value: "Deposit"
},
{
role: "public",
value: "test"
}
]
}
];
console.log(update(PubSidebar, groupKey));
You could take a filtering for any depth and reassemble the objects for the result.
const
filter = ({ content = [], ...o }) => {
content = content.flatMap(filter);
if (o.role !== 'public' && !groupKey.includes(o.value)) return [];
return content.length ? { ...o, content } : o;
},
groupKey = ['oaDeal', 'Journals', 'Deposit'],
pubSidebar = [{ value: 'Dashboard', role: 'public' }, { value: 'oaDeal', role: 'private', content: [{ role: 'private', value: 'oaDeal' }] }, { value: 'Journals', role: 'public', content: [{ role: 'private', value: 'Journals' }, { role: 'private', value: 'Token' }, { role: 'private', value: 'policy' }, { role: 'private', value: 'Deposit' }, { role: 'public', value: 'test' }] }],
result = pubSidebar.flatMap(filter);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }