Filter recursive array

Question

I am trying to find the best way (minimal code) to filter a recursive list of items based on some condition. The list describes some navigation that contains multiple sections and each section contains navigation items (where each navigation item can contain a recursive amount of navigation items).

Example:

const navSections = [{
    title: 'Section A',
    items: [
        {
            title: 'A1',
            permission: 'Moderator'
        },
        {
            title: 'A2',
            permission: 'Moderator',
            items: [{
                title: 'A21',
                permission: 'Admin'
            },
            {
                title: 'A22',
                permission: 'Admin'
            }]
        }]
},
{
    title: 'Section B',
    items: [
        {
            title: 'B1',
            permission: 'User'
        },
        {
            title: 'B2',
            permission: 'User'
        },
        {
            title: 'B3',
            permission: 'Admin'
        }]
}]

The user has an array of permissions and I want to filter out all items that are not in the set of permissions of the user.

const userPermissions = ['Moderator', 'User']

I am not searching for a solution that simply loops through the elements; I can code that myself.

Should we not call this "nested" rather than "recursive"? I'm not trying to be smartypants - genuine question. :) — Nicolas Goosen, May 17 '22 at 15:28
Regarding your last sentence: so you're looking for a "functional" style, rather than "iterative" one... — Nicolas Goosen, May 17 '22 at 15:30
Yes, exactly! If I had to guess, there is probably a neat solution using .reduce @NicolasGoosen — Tom el Safadi, May 17 '22 at 15:31
Check out these answers: https://stackoverflow.com/questions/38375646/filtering-array-of-objects-with-arrays-based-on-nested-value — Nicolas Goosen, May 17 '22 at 15:31

Yosvel Quintero · Accepted Answer · 2022-05-17T16:19:00.467

Check this:

const navSections = [{title: 'Section A',items: [{title: 'A1',permission: 'Moderator',},{title: 'A2',permission: 'Moderator',items: [{title: 'A21',permission: 'Admin',},{title: 'A22',permission: 'Admin',}]}]},{title: 'Section B',items: [{title: 'B1',permission: 'User',},{title: 'B2',permission: 'User',},{title: 'B3',permission: 'Admin',}]}]

const userPermissions = ['Moderator', 'User']

const navSectionsByPermissions = (arr, permissions, isBase = true) =>
  arr.filter(o => {
    if (o.items) {
      o.items = navSectionsByPermissions(o.items, permissions, false)
    }
    return o.permission && permissions.includes(o.permission) || isBase
  })
  
const result = navSectionsByPermissions(navSections, userPermissions)

console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Great! This is the solution I was looking for. Thanks – Tom el Safadi May 17 '22 at 16:06 — Tom el Safadi, May 17 '22 at 16:06

Filter recursive array

1 Answers1