在javascript中过滤三级嵌套数组

Question

I'm trying to filter an array by the third level nested array value. I tried using .filter . The array format is shown below for example. I need to filter menuItems based on role.

const menuItems = [{
    title: 'inventory',
    submenu: [{
        title: 'GRN',
        role: ['admin']
      },
      {
        title: 'purchase order',
        role: ['user']
      },
    ]
  },
  {
    title: 'sales-invoice',
    submenu: [{
        title: 'invoice ',
        role: ['admin']
      },
      {
        title: 'invoice-list',
        role: ['user']
      },
    ]
  },
]

A varible role is defined

var role=['admin']

I tried to filter using the following code. But i couldn't get the result

const result = menuItems.filter(menu => {
  if (menu.submenu) {
    menu.submenu.filter(submenu => {
      return this.role.some(val => (submenu.role.indexOf(val) !== -1))
    })
  }
})

Answer 1

Is this what you are looking for? Based on the someRole string, it will return all submenu items with that role.

const menuItems = [
    {
        title: 'inventory',
        submenu: [
            {
                title: 'GRN',
                role: ['admin']
            },
            {
                title: 'purchase order',
                role: ['user']
            },
        ]
    },
    {
        title: 'sales-invoice',
        submenu: [
            {
                title: 'invoice ',
                role: ['admin']
            },
            {
                title: 'invoice-list',
                role: ['user']
            },
        ]
    }
]

let someRole = 'user'

for(const menu in menuItems) {
    const filteredItems = menuItems[menu].submenu.filter(item => item.role.includes(someRole))
    menuItems[menu].submenu = filteredItems
}

console.log(menuItems)

Answer 2

If I understand correctly, you want to disable all the options for the user that are visible for the admin.

 var menuItems = [{ title: 'inventory', submenu: [{ title: 'GRN', role: ['admin'] }, { title: 'purchase order', role: ['user'] }, ] }, { title: 'sales-invoice', submenu: [{ title: 'invoice ', role: ['admin'] }, { title: 'invoice-list', role: ['user'] }, ] }, ] const filterMenu = (menuItems, targetRoles) => menuItems.map((item) => ({ ...item, submenu: item.submenu.filter(({role}) => targetRoles.reduce((acc, val) => acc + Number(!role.includes(val)), 0)) })) console.log(filterMenu(menuItems, ['admin']))

This might be problematic if you were to put admin and user into the roles array.

Answer 3

This will work if global role and role in submenu object are arrays.

const menuItems = [
  {
    title: "inventory",
    submenu: [
      {
        title: "GRN",
        role: ["admin"]
      },
      {
        title: "purchase order",
        role: ["user"]
      }
    ]
  },
  {
    title: "sales-invoice",
    submenu: [
      {
        title: "invoice ",
        role: ["admin"]
      },
      {
        title: "invoice-list",
        role: ["user"]
      }
    ]
  }
];

var role = ["admin"];

const result = menuItems.filter(({ submenu }) => {
  if (!submenu) return false;

  return submenu.some(({ role: menuItemRoles }) =>
    menuItemRoles.some(menuItemRole => role.includes(menuItemRole))
  );
});

console.log(result);