I'm trying to build a menu dynamically and I'm going to output the data to a JSON Object of the following form.
"Link 1": {
"href":"#",
"Sub Link 1": {
"href":"#"
},
"Sub Link 2": {
"href":"#",
"Sub Sub Link 1": {
"href":"#"
},
"Sub Sub Link 2": {
"href":"#"
}
}
}
Firs of all, I'd like to know if that's a good design for a link hierarchy.
On the other hand, When I'm iterating over the array, I'm only able to get the name "Link 1" but not any of the properties underneath the link hierarchy.
The loop that I'm using is the following one:
for(var item in jsonMenu) {
console.log(item)
}
It outputs: Link 1, Link 2, Link 3
but I want to be able to access the other JSON objects inside that object.
I tried nesting another loop but all I get are numbers : 0, 1, 2, 3 which I suspect is the length of the string.
I also tried using:
item.hasOwnProperty(key)
but it doesn't work: it returns Uncaught Reference Error: key does not exist
Any help would be greatly appreciated
EDIT:
This is so far what I have, but it seems to me like too much overhead for a menu, so far it has an execution time of O(n^2) and I still need to go one level deep, so the execution time would be of O(n^3):
for(var item in jsonMenu) {
if(jsonMenu.hasOwnProperty(item)) {
for(var attr in jsonMenu[item]) {
console.log(attr);
}
console.log(item + " => " + jsonMenu[item])
}
}
If at all possible, I'd recommend restructuring the source data so that the name is a property of the object rather than the key name itself, something like this:
{
"name": "Link 1"
"href":"#",
"children": [
{
"name": "Sub Link 1"
"href":"#"
}
}
This is better semantics, allows you to add additional properties easily and will be much easier to process and probably easier to generate too since it better matches an object in most programming languages. Otherwise you're left assuming every single key in an object is a new node.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With