title: Nested JSON Objects Within JSON Object
body: <p>I'm trying to build a menu dynamically and I'm going to output the data to a JSON Object of the following form.</p>
  
  <pre><code>"Link 1": {
      "href":"#",
      "Sub Link 1": {
          "href":"#"
      },
      "Sub Link 2": {
          "href":"#",
          "Sub Sub Link 1": {
              "href":"#"
          },
          "Sub Sub Link 2": {
              "href":"#"
          }       
      }       
  }
  </code></pre>
  
  <p>Firs of all, I'd like to know if that's a good design for a link hierarchy. </p>
  
  <p>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. </p>
  
  <p>The loop that I'm using is the following one:</p>
  
  <pre><code>for(var item in jsonMenu) {
      console.log(item)
  }
  </code></pre>
  
  <p>It outputs: <code>Link 1, Link 2, Link 3</code> 
  but I want to be able to access the other JSON objects inside that object. </p>
  
  <p>I tried nesting another loop but all I get are numbers : <code>0, 1, 2, 3</code> which I suspect is the length of the string. </p>
  
  <p>I also tried using:</p>
  
  <p><code>item.hasOwnProperty(key)</code> </p>
  
  <p>but it doesn't work: it returns <code>Uncaught Reference Error: key does not exist</code> </p>
  
  <p>Any help would be greatly appreciated</p>
  
  <p>EDIT:</p>
  
  <p>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):</p>
  
  <pre><code> for(var item in jsonMenu) {
       if(jsonMenu.hasOwnProperty(item)) {
          for(var attr in jsonMenu[item]) {   
              console.log(attr);
          }
          console.log(item + " =&gt; " + jsonMenu[item])
      }
   }
  </code></pre>