Facing Issue on Loading JSON to Bootstrap Tab

Facing Issue on Loading JSON to Bootstrap Tab

Can you please take a look at this demo and let me know why I am not able to load the second layers of data in the JSON to bootstrap tab ` tab-content ` ?


  1. var data = {
  2.   "action": [{
  3.       "id": "1001",
  4.       "name": "Matrix"
  5.     },
  6.     {
  7.       "id": "1002",
  8.       "name": "IP Man"
  9.     },
  10.     {
  11.       "id": "1003",
  12.       "name": "Revenge"
  13.     }
  14.   ],
  15.   "comedy": [{
  16.       "id": "2001",
  17.       "name": "Iceman"
  18.     },
  19.     {
  20.       "id": "2002",
  21.       "name": "Pat & Mat"
  22.     },
  23.     {
  24.       "id": "2003",
  25.       "name": "Sugar"
  26.     }
  27.   ],
  28.   "animation": [{
  29.       "id": "3001",
  30.       "name": "Frozen"
  31.     },
  32.     {
  33.       "id": "3002",
  34.       "name": "Tangled"
  35.     },
  36.     {
  37.       "id": "3003",
  38.       "name": "Croods"
  39.     }
  40.   ]
  41. };

  43. for (var i in data) {
  44.   $('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>');

  46. }
  47.   for (var j = 0; j < data[i].length; j++) {
  48.     var obj = data[i][j];
  49.     $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + obj.name + '">' + obj.name + '</div>');
  50.  }
and the HTML is

  1. <div class="container">
  2.   <ul class="nav nav-tabs" role="tablist"></ul>
  3.   <div class="tab-content"></div>
  4. </div>