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 PeopleIs there a simple way using array.map function to achieve this since I am building this menu inside an HTML div.
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..