title: Create a dynamic list using JSON and jquery
body: <p><strong>JSON file</strong></p>
  
  <pre><code>{
  "subject": "title",
  "level": [
   {
    "title":"Test1",
    "sub":[{
     "title":"Test1 sub_1",
  
     "links":[{
      "title":"Test1sub1.1link_title",
      "address":"linkAddress"
      },{
      "title":"Test1sub1.2_link_title",
      "address":"linkAddress"
      }
     ] 
  
    },{
     "title":"Test2 sub_2",
  
     "links":[{
      "title":"Test2sub2.1_link_title",
      "address":"linkAddress"
      },{
      "title":"Test2sub2.2_link_title",
      "address":"linkAddress"
      }
     ]
    }]  
   },
   {
    "title":"Test3",
    "sub":[{
     "title":"Test3 sub_1",
  
     "links":[{
      "title":"Test31.1_link_title",
      "address":"linkAddress"
      },{
      "title":"Test31.2_link_title",
      "address":"linkAddress"
      }
     ] 
  
    }]
   }
  
   ]
  }
  </code></pre>
  
  <p>In my markup I have the following</p>
  
  <pre><code>var json = $.getJSON('datar.json',function(data){
   for(var i =0; i&lt; data.level.length; i++){
  
     console.log(data.level[i].title);
     $('#accordion').append("&lt;li&gt;"+data.level[i].title+"&lt;/li&gt;");
  
     for (var k = 0; k&lt;data.level[i].sub.length; k++){
  
      console.log(data.level[i].sub[k].title);
      $('#accordion').append("&lt;li&gt;"+data.level[i].sub[k].title+"&lt;/li&gt;");
      for (var j = 0; j&lt;data.level[i].sub[k].links.length; j++){
  
       console.log(data.level[i].sub[k].links[j].title);
       $('#accordion').append("&lt;li&gt;"+data.level[0].sub[j].links[i].title+"&lt;/li&gt;");
  
      }
     }
    } 
  </code></pre>
  
  <p>As we can see I'm looping through and appending to create dynamic list. Fom my console.log output I receive the correct format I require.</p>
  
  <pre><code>Test1
  Test1 sub_1
  Test1sub1.1link_title
  Test1sub1.2_link_title
  Test2 sub_2
  Test2sub2.1_link_title
  Test2sub2.2_link_title
  Test3
  Test3 sub_1
  Test31.1_link_title
  Test31.2_link_title 
  </code></pre>
  
  <p>But on the page itself its not displaying correctly,</p>
  
  <pre><code>Test1
  Test1 sub_1
  Test1sub1.1link_title
  Test2sub2.1_link_title
  Test2 sub_2
  Test1sub1.1link_title
  Test2sub2.1_link_title
  Test3
  Test3 sub_1
  Test1sub1.2_link_title
  Test2sub2.2_link_title
  </code></pre>
  
  <p>If anyone could advise it will be greatly appreciated.</p>