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

Yes, I'm the one designing the JSON structure, if you have a better approach, I'd love to see it! — ILikeTacos, May 02 '13 at 17:47
Recursively Traverse the JSON structure - http://stackoverflow.com/a/722676/1538708 — adamb, May 02 '13 at 17:52
@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 — Matthew Cox, May 02 '13 at 18:16

score 4 · Answer 1 · answered May 02 '13 at 17:51

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.

I wrote a simple recursive function that renders this. – Jason Sperske May 02 '13 at 18:08 — Jason Sperske, May 02 '13 at 18:08

score 2 · Accepted Answer · answered May 02 '13 at 18:03

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>

score 1 · Answer 3 · answered May 02 '13 at 17:51

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.

score 1 · Answer 4 · answered May 02 '13 at 17:52

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: []
   }]
}]

Bergi · Answer 5 · 2013-05-02T17:59:23.670

1

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":"#"
        }]
    }]
}

edited May 02 '13 at 17:59

answered May 02 '13 at 17:53

Bergi

630,263
148
957
1,375

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 – ILikeTacos May 02 '13 at 17:58
I'm sure it is not n^3 (n being the number of menu items). And you would just use a simple recursive function. – Bergi May 02 '13 at 18:00
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? – ILikeTacos May 02 '13 at 18:02
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 May 02 '13 at 18:03
1

Maybe these links can help you: http://stackoverflow.com/a/11789289/1048572, http://stackoverflow.com/a/12179193/1048572, http://stackoverflow.com/a/12141224/1048572 (though they mostly do unspecific looping over the properties for logging purposes) – Bergi May 02 '13 at 18:08

Nested JSON Objects Within JSON Object

5 Answers5