Create a dynamic list using JSON and jquery

Question

JSON file

{
"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"
    }
   ] 

  }]
 }

 ]
}

In my markup I have the following

var json = $.getJSON('datar.json',function(data){
 for(var i =0; i< data.level.length; i++){

   console.log(data.level[i].title);
   $('#accordion').append("<li>"+data.level[i].title+"</li>");

   for (var k = 0; k<data.level[i].sub.length; k++){

    console.log(data.level[i].sub[k].title);
    $('#accordion').append("<li>"+data.level[i].sub[k].title+"</li>");
    for (var j = 0; j<data.level[i].sub[k].links.length; j++){

     console.log(data.level[i].sub[k].links[j].title);
     $('#accordion').append("<li>"+data.level[0].sub[j].links[i].title+"</li>");

    }
   }
  }

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.

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

But on the page itself its not displaying correctly,

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

If anyone could advise it will be greatly appreciated.

On the last append of your markup you say level[0], that tells it to look at the first element of the json-object which is test1. I think what you want to do is level[i] — Ole Haugset
– Ole Haugset, Commented Oct 2, 2014 at 6:38
You messed up with indexes. Replace $('#accordion').append("<li>"+data.level[0].sub[j].links[i].title+"</li>"); with $('#accordion').append("<li>"+data.level[i].sub[k].links[j].title+"</li>"); — Regent
– Regent, Commented Oct 2, 2014 at 6:39
Thats why I prefer Array.forEach(). It's too easy to make a mistake with the indexes. — dusky
– dusky, Commented Oct 2, 2014 at 7:23

stUrb · Accepted Answer · 2014-10-02 07:26:10Z

1

Have a look at the last for-loop:

console.log(data.level[**i**].sub[**k**].links[**j**].title);
$('#accordion')
   .append("<li>"+data.level[**0**].sub[**j**].links[**i**].title+"</li>");

=> it's not the same index-elements between console.log and append

edited Oct 2, 2014 at 7:26

stUrb

6,8708 gold badges45 silver badges74 bronze badges

answered Oct 2, 2014 at 6:52

Sher

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a dynamic list using JSON and jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related