Фильтрация трехуровневого вложенного массива в javascript

Question

Я пытаюсь отфильтровать массив по значению вложенного массива третьего уровня. Я пытался использовать .filter. Формат массива показан ниже, например. Мне нужно отфильтровать menuItems на основе роли.

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(menu => {
  if (menu.submenu) {
    menu.submenu.filter(submenu => {
      return this.role.some(val => (submenu.role.indexOf(val) !== -1))
    })
  }
})

Answer 1

Если я правильно понимаю, вы хотите отключить все параметры для пользователя, которые видны для администратора.

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']))

Это может быть проблематично c, если вы поместите администратора и пользователя в массив ролей.

Answer 2

Это будет работать, если глобальные role и 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"]
      }
    ]
  }
];

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);

Answer 3

Это то, что вы ищете? Основываясь на строке someRole, он вернет все элементы submenu с этой ролью.

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)