Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery - Populate List with JSON using jQuery
{
"Shoe": [
{
"Women": [
{
"Sandals": [
{
"Slide": [
{
"id": "1",
"brand": "Gucci"
},
{
"id": "2",
"brand": "Prada"
}
]
}
],
"Heels": [
{
"Stiletto": [
{
"id": "1",
"brand": "Burberry"
},
{
"id": "2",
"brand": "Cole Haan"
}
]
}
]
}
]
},
{
"Men": [
{
"Boots": [
{
"Leather": [
{
"id": "1",
"brand": "Cat"
}
]
}
]
}
]
}
],
"Jean": [],
"Shirt": []
}
$.getJSON('input.json', function(json) {//parseJSON
var html = '<ul>';//instantiate
$.each(json, function(i, lev1) {// 'Shoes' level
html += '<li>' + i;
$.each(lev1, function(j, lev2) {
html += '<ul>';
$.each(lev2, function(k, lev3) {// 'Women' level
html += '<li>' + k;
$.each(lev3, function(l, lev4) {
html += '<ul>';
$.each(lev4, function(m, lev5) {// 'Sandals' level
html += '<li>' + m;
$.each(lev5, function(n, lev6) {
html += '<ul>';
$.each(lev6, function(o, lev7) {// 'Slide' level
html += '<li>' + o;
$.each(lev7, function(p, lev8) {
html += '<ul>';
$.each(lev8, function(q, lev9) {//Key : Value pairs
html += '<li>' + q + ': ' + lev9 + '</li>';
});
html += '</ul>';
});
html += '</li>';
});
html += '</ul>';
});
html += '</li>';
});
html += '</ul>';
});
html += '</li>';
});
html += '</ul>';
});
html += '</li>';
});
html += '</ul>';
//append to body
$('body').append(html);
});
@zuch

This comment has been minimized.

Copy link
Owner Author

commented Aug 14, 2013

Output

  • Shoe
    • Women
      • Sandals
        • Slide
          • id: 1
          • brand: Gucci
          • id: 2
          • brand: Prada
      • Heels
        • Stiletto
          • id: 1
          • brand: Burberry
          • id: 2
          • brand: Cole Haan
    • Men
      • Boots
        • Leather
          • id: 1
          • brand: Cat
  • Jean
  • Shirt
@MarcelBurkhardt

This comment has been minimized.

Copy link

commented Oct 15, 2013

why don't you try this way?

$.getJSON('file.json', function()
{
  //first call of function
  $(some_html_element).html( _json.getElements(this) );
};

_json = new function()
{
 this.getElements = function (_element)
 {
  var _sreturn = '<ul><li>';
  $.each(_element, function(val, level) 
  {
   _sreturn += val;

   //every call again, the detph is not care
   _sreturn += ((var childstring = _json.getElements(this)).length > 0) 
                         ? 
                          childstring : '<li>' + level + '</li>';
   });
   return _sreturn + '</ul></li>';
  }
};

so it can use itself use ever childnote was found.

@MeenakshiNaik

This comment has been minimized.

Copy link

commented Jul 25, 2014

Thanks... that worked for me. 👍 :)

@atulbz

This comment has been minimized.

Copy link

commented Mar 2, 2015

useful

@abhishekkumar7aug

This comment has been minimized.

Copy link

commented Aug 21, 2015

really great

@szabbenjamin

This comment has been minimized.

Copy link

commented Nov 9, 2018

I want to kill myself. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.