Tengo una estructura JSON siguiente que necesito analizar en React para crear un menú lateral para una aplicación.
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"} ]}], }];La salida necesaria para el menú lateral anidado debe ser la siguiente:
John First Vulnerability Open Roles Second Some People Another People Sarah First Vulnerability Open Roles Second Some People Another People¿Hay una manera simple de usar la función array.map para lograr esto, ya que estoy creando este menú dentro de un div HTML?
Puedes crearlo muy fácilmente usando el siguiente código
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)Actualización: código actualizado para cualquier búsqueda de clave.