I have a following JSON Structure which I need to parse in React to build a side menu for an app.

var a = [
  {"name":"John",
  "subMenus":[{"First":[{"name":"Vulnerability","to":"/johnvulner"},
                        {"name":"Open Roles","to":"/johnopenRoles"}
                       ]},
              {"Second":[{"name":"Some People","to":"/johnpeople"},
                        {"name":"Another People","to":"/johnanotherpeople"}
                       ]}],
  
  },
{"name":"Sarah",
  "subMenus":[{"First":[{"name":"Vulnerability","to":"/sarahvulner"},
                        {"name":"Open Roles","to":"/sarahopenRoles"}
                       ]},
              {"Second":[{"name":"Some People","to":"/sarahsomepeople"},
                        {"name":"Another People","to":"/sarahanotherpeople"}
                       ]}],
  
  }];

The output needed for the nested side menu should be as follows -

John
   First
      Vulnerability
      Open Roles
   Second
      Some People
      Another People
Sarah
   First
      Vulnerability
      Open Roles
   Second
      Some People
      Another People

Is there a simple way using array.map function to achieve this since I am building this menu inside an HTML div.

CodePudding user response：

You can create it very easily by using the following code

let a = [{
    "name": "John",
    "subMenus": [{
        "First": [{
            "name": "Vulnerability",
            "to": "/johnvulner"
          },
          {
            "name": "Open Roles",
            "to": "/johnopenRoles"
          }
        ]
      },
      {
        "Second": [{
            "name": "Some People",
            "to": "/johnpeople"
          },
          {
            "name": "Another People",
            "to": "/johnanotherpeople"
          }
        ]
      }
    ],

  },
  {
    "name": "Sarah",
    "subMenus": [{
        "First": [{
            "name": "Vulnerability",
            "to": "/sarahvulner"
          },
          {
            "name": "Open Roles",
            "to": "/sarahopenRoles"
          }
        ]
      },
      {
        "Second": [{
            "name": "Some People",
            "to": "/sarahsomepeople"
          },
          {
            "name": "Another People",
            "to": "/sarahanotherpeople"
          }
        ]
      }
    ],

  }
];

var menuItems = []

a.map((menu) => {

  var submenus = []

  menu.subMenus.map((submenu) => {
      
      let keys = Object.keys(submenu);
      
      keys.map( key => {
         var keyValues=[]
         if (submenu[key]){
           submenu[key].map((item) => {
             keyValues.push(item.name)
           })

           submenus.push({
             [key]: keyValues
           })
         }
      })
    
  })

 let thekey=menu.name
  menuItems.push({
   [thekey]: submenus
  })

})

console.log(menuItems)

Update: Code updated for a any key fetch..