Nested JSON Objects Within JSON Object

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

Answers


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>

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 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.


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

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

Need Your Help

Completion Handler crash in AutoRenewable In-Appurchase

ios iphone transactions crash completionhandler

I'm making an application in which,I have to make my Inappurchase product auto renewable,for this, after reading Apple documents i came to know that after every transaction for autorenewable produc...

Pass a block to a C++ method from objective C

c++ objective-c ios4 objective-c-blocks

I have a C++ helper class that I use with objective-C. I would like to pass the c++ class a block from a view controller (a callback) so that when it is executed I am on the main thread and can upd...