filter nested object array in javascript

Question

I want to sort the above given array so that the output array will be as given in output section. I have tried some code which is given below. I am using javascript for sorting. In angular I am using this To display menu according to user role. I have googled a lot but not getting solution

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'],
          }
        ]
      },

    ];

output:

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

    ];

code for sorting:

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

Answer 1

You could move the wanted menu and submenu labels into arrays and filter the objects by creating new object with filtered menus .

This approach does not mutate the data.

It uses Array#flatMap for the outer array and Array#filter for getting the wanted parts of the nested array.

If the nested array does not have any item, then take the original object.

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