在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; }