Nested JSON Objects Within JSON Object

Question

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])
 }
 }

• Paul: Are you able to change the structure of your JSON?
• ILikeTacos: Yes, I'm the one designing the JSON structure, if you have a better approach, I'd love to see it!
• rab: recursive loop the json data
• adamb: Recursively Traverse the JSON structure - stackoverflow.com/a/722676/1538708
• Matthew Cox: @AlanChavez I wouldn't get hung up on measuring complexity in javascript for generating a menu if I were you. Not saying it isn't important but throwing around Big 0 doesn't mean much if the set is really small

Answer 1

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.

• Jason Sperske: I wrote a simple recursive function that renders this.

Answer 2

Building on Paul's answer here is a function that renders this JSON as a Menu (demo):

<ul id='menu'></ul>
<script>
 var links = {
 "name": "Link 1",
 "href": "#link1",
 "children": [{
 "name": "Sub Link 1",
 "href": "#subLink1"
 }]
 },
 render = function (parent, link) {
 var element = $("<li><a href='" + link.href + "'>" + link.name + "</a></li>"),
 sublist,
 child;
 if (link.hasOwnProperty('children') && link.children.length > 0) {
 sublist = $("<ul></ul>");
 for (child = 0; child < link.children.length; child++) {
 render(sublist, link.children[child]);
 }
 element.append(sublist);
 }
 parent.append(element);
 };
 render($('#menu'), links);
</script>

Answer 3

I would reorganize your structure like so as to make it very easy to loop over and build the menu:

{
 "Links": [{
 "href": "#",
 "Links": [{
 "href": "#",
 "Links": [{ "href": "#" }, { "href": "#" }]
 }]
 }];
}

This will allow you to use a recursive looping approach where all the naming conventions are the same.

Answer 4

This seems like it would be perfect as a tree-like structure, where the text is a property and the value of the property is the inner text of the link. This is a much more flexible structure since you won't have to manually iterate over the properties of the object to find out the value of the inner text.

{ 
 text: "Link #1"
 href: "..."
 children: [{
 text: "Link #2",
 href: "...",
 children: []
 }, {
 text: "Link #3",
 href: "...",
 children: [{
 text: "Link #4",
 href: "...",
 children: []
 }]
 }]
}

Of course, this assumes that you will only ever have one root link. So if you want more, you can essentially have an array of "trees" like so:

[{ 
 text: "Link #1"
 href: "..."
 children: [{
 text: "Link #2",
 href: "...",
 children: []
 }, {
 text: "Link #3",
 href: "...",
 children: [{
 text: "Link #4",
 href: "...",
 children: []
 }]
 }]
}, {
 text: "Link #5",
 href: "...",
 children []
}, {
 text: "Link #6",
 href: "...",
 children: [{
 text: "Link #7",
 href: "...",
 children: []
 }]
}]

Answer 5

I don't think that schema is a good idea, for two reasons:

• JSON objects are unordered - I guess you want to encode the order of submenus.
• you can't have a submenu with with the title href (and maybe you later want to add other properties)

Better use arrays of objects, with a children property being another array. Iterating that is much easier also. Something like

{
 "name": "Link 1",
 "href":"#",
 "children": [{
 "name": "Sub Link 1",
 "href":"#"
 }, {
 "name": "Sub Link 2",
 "href":"#",
 "children": [{
 "name": "Sub Sub Link 1",
 "href":"#"
 }, {
 "name": "Sub Sub Link 2",
 "href":"#"
 }]
 }]
}

• ILikeTacos: I really like this approach, but then how would I traverse it? MY current solution takes a O(n^3) to traverse a menu 3 layers deep
• Bergi: I'm sure it is not n^3 (n being the number of menu items). And you would just use a simple recursive function.
• ILikeTacos: But how can I differentiate a simple key->value node, from an object node? should I use isinstanceof(Object) or something like that, so the program knows that it needs to keep going down the hierarchy?
• Bergi: That's the point of differentiating them: You have your items (with properties like name or href), and if they have a children property you can get that array and iterate it.
• Bergi: Maybe these links can help you: stackoverflow.com/a/11789289/1048572, stackoverflow.com/a/12179193/1048572, stackoverflow.com/a/12141224/1048572 (though they mostly do unspecific looping over the properties for logging purposes)