Skip to content

Instantly share code, notes, and snippets.

@rava-dosa
Created July 12, 2018 14:00
Show Gist options
  • Save rava-dosa/d46fe595e9c737418c64b1f19685a32d to your computer and use it in GitHub Desktop.
Save rava-dosa/d46fe595e9c737418c64b1f19685a32d to your computer and use it in GitHub Desktop.
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment