filter array of nested objects in TypeScript

Question

I'm having this list of menus and submenus:

[
    {
        "NUA_ID_Menu": 1,
        "TXT_Nom_Menu": "Menu 1",
        "Liste_Sous_Menus": [
            {
                "TXT_Nom_Menu": "SubMenu 1",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 2,
                        "TXT_Nom_Direction": "Direction A" 
                    },
                    {
                        "NUA_ID_Direction": 4,
                        "TXT_Nom_Direction": "Direction C"
                    }
                ]
            },
            {
                "TXT_Nom_Menu": "SubMenu 2",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 4,
                        "TXT_Nom_Direction": "Direction C"
                        
                    }
                ]
            },
            {
                "TXT_Nom_Menu": "SubMenu 3",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 3,
                        "TXT_Nom_Direction": "Direction B"
                    }
                ]
            }
        ]
    },
    {
        "NUA_ID_Menu": 2,
        "TXT_Nom_Menu": "Menu 2",
        "Liste_Sous_Menus": [
            {
                "TXT_Nom_Menu": "SubMenu 4",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 2,
                        "TXT_Nom_Direction": "Direction A"
                    },
                    {
                        "NUA_ID_Direction": 3,
                        "TXT_Nom_Direction": "Direction B"
                    }
                ]
            }
        ]
    }
]

I want to filter the menus which contains submenus which contains Direction C for example. I want this result for example:

[
    {
        "NUA_ID_Menu": 1,
        "TXT_Nom_Menu": "Menu 1",
        "Liste_Sous_Menus": [
            {
                "TXT_Nom_Menu": "SubMenu 1",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 2,
                        "TXT_Nom_Direction": "Direction A" 
                    },
                    {
                        "NUA_ID_Direction": 4,
                        "TXT_Nom_Direction": "Direction C"
                    }
                ]
            },
            {
                "TXT_Nom_Menu": "SubMenu 2",
                "Liste_Direction_Menu": [
                    {
                        "NUA_ID_Direction": 4,
                        "TXT_Nom_Direction": "Direction C"
                        
                    }
                ]
            }
        ]
    }
]

Or I want to filter the menus with submenus with an array of directions

I tried:

    this.mesMenus=res.filter(menu=>{
      return menu.Liste_Sous_Menus.filter(ssmenu=>{
        return ssmenu.Liste_Direction_Menu.filter(direction=>{
          return direction.NUA_ID_Direction==2;
        }).length>0;
      }).length>0;
    });

also

    this.mesMenus = res.map(function(menu) {
      menu.Liste_Sous_Menus = menu.Liste_Sous_Menus.map(function(ssmenu) {
        ssmenu.Liste_Direction_Menu.filter(function(direction) {
          return direction.NUA_ID_Direction==4;
        });
        return ssmenu;
      });
      return menu;
    });

I can filter with one child (this works)

const submenus = [ 6];
    this.mesMenus =res.filter(d => d.Liste_Sous_Menus.every(c => submenus.includes(c.NUA_Id_Sous_Menu)));

but with grand child I cant!! Please can you help me? Thank You!

user_2490286 · Answer

Your question is a little misleading. You want to reduce both the menus and submenus so you need to do a reduce, not a filter.

Not inserting the menus that are empty and filtering the submenus by the direction.

const directions = [4];
this.mesMenus = res.reduce((arr, cur) => { 
     const submenus = cur.Liste_Sous_Menus
          .filter(dir => dir.Liste_Direction_Menu
               .some(m => directions
                    .some(d => m.NUA_ID_Direction == d))); 
     if(submenus.length > 0) { 
        cur.Liste_Sous_Menus = submenus;
        arr.push(cur);
     } 
     return arr;
},[]);

filter array of nested objects in TypeScript

1 Answers