在javascript中过滤嵌套对象数组

Question

我想对上面给定的数组进行排序，以便输出数组与输出部分中给出的一样。 我已经尝试了下面给出的一些代码。 我正在使用 javascript 进行排序。 在 angular 我使用这个 To display menu 根据用户角色。 我用谷歌搜索了很多但没有得到解决方案

this.items = [
      {
        label: 'Home', routerLink: ['Home']
      },
      {
        label: 'menu1',
        items: [
          {
            label: 'submenu1',
            routerLink: '/submenu1'
          },
          {
            label: 'submenu2'
            , routerLink: '/submenu2'
          },
          {
            label: 'submenu3',
            routerLink: ['/submenu3']
          }
        ]
      },
      {
        label: 'menu2',
        items: [
          {
            label: 'submenu5',
            routerLink: ['/submenu5']
          },
        ]
      },
      {
        label: 'menu3',
        items: [
          {
            label: 'submenu6',
            routerLink: ['/submenu6'],
          }
        ]
      },

    ];

输出：

this.items = [
      {
        label: 'Home', routerLink: ['Home']
      },
      {
        label: 'menu1',
        items: [
          {
            label: 'submenu1',
            routerLink: '/submenu1'
          }
        ]
      },
      {
        label: 'menu3',
        items: [
          {
            label: 'submenu6',
            routerLink: ['/submenu6'],
          }
        ]
      },

    ];

排序代码：

let filterArr = this.filteredArray
      .filter(x => x.label == "Home" && x.label == "menu3")
      .map(y => y.items.filter(z => z.label == 'submenu6'));

Answer 1

您可以将需要的菜单和子菜单标签移动到数组中，并通过使用过滤menus创建新对象来过滤对象。

这种方法不会改变数据。

它使用Array#flatMap作为外部数组，使用Array#filter获取嵌套数组的所需部分。

如果嵌套数组没有任何项，则取原始对象。

 var items = [{ label: 'Home', routerLink: ['Home'] }, { label: 'menu1', items: [{ label: 'submenu1', routerLink: '/submenu1' }, { label: 'submenu2', routerLink: '/submenu2' }, { label: 'submenu3', routerLink: ['/submenu3'] }] }, { label: 'menu2', items: [{ label: 'submenu5', routerLink: ['/submenu5'] }] }, { label: 'menu3', items: [{ label: 'submenu6', routerLink: ['/submenu6'] }] }], menu = ['Home', 'menu1', 'menu3'], submenu = ['submenu1', 'submenu6'], result = items.flatMap(o => { if (!menu.includes(o.label)) return []; var items = (o.items || []).filter(({ label }) => submenu.includes(label)); return items.length ? { ...o, items } : o; }); console.log(result);

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