Hi All, please find the below code on json data parsing throgh jquery on multi level of sub categories. presently there are 3 sub categories, i want a suggestion on script how we can make it dynamic script for sub categories to show.
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready( function() {
var myJSONCategories ={"categories":[{"ic_id":"100002","ic_disp_val":"Campaigns","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"Campaigns sub categorist","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Campaigns / Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]}]};
var htmlBuilder='';
$.each(myJSONCategories.categories, function(inx, content) {
if(inx==0)
{
htmlBuilder +='<li>'+content.ic_disp_val;
}else{
htmlBuilder +='<li>'+content.ic_disp_val;
}
if (content.ic_sub==1)
{
$.each(content.ic_sub_categories, function(inx1, cnt_sub1)
{
len1=content.ic_sub_categories.length-1;
if(inx1==0)
{
htmlBuilder += '<ul><li>'+cnt_sub1.ic_disp_val;
}else
{
htmlBuilder += '</li><li>'+cnt_sub1.ic_disp_val;
}
if (cnt_sub1.ic_sub==1)
{
$.each(cnt_sub1.ic_sub_categories, function(inx2, cnt_sub2)
{
len2=cnt_sub1.ic_sub_categories.length-1;
if(inx2==0)
{
htmlBuilder += '<ul><li>'+cnt_sub2.ic_disp_val;
}else
{
htmlBuilder += '</li><li>'+cnt_sub2.ic_disp_val;
}
if(inx2==len2)
{
htmlBuilder +='</li></ul>';
}
});
}
if(inx1==len1)
{
htmlBuilder +='</li></ul>';
}
});
}
htmlBuilder +='</li>'; //Categories End
});
$( "#expList").html(htmlBuilder);
prepareList();
});
html code
<ul id="expList">
</ul>
One recursive function able to go n subcategories deep! Have fun.
obj = {"categories":[{"ic_id":"100002","ic_disp_val":"Campaigns","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"Campaigns sub categorist","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Campaigns / Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]}]};
function addCategories(obj)
{
htmlBuilder = "";
for (var i = 0; i < obj.length;i++)
{
htmlBuilder +='<li>'+obj[i].ic_disp_val;
if (obj[i].ic_sub==1)
{
htmlBuilder +='<ul>';
htmlBuilder += addCategories(obj[i].ic_sub_categories);
htmlBuilder +='</ul>';
}
htmlBuilder +='</li>';
}
return htmlBuilder;
}
document.getElementById("expList").innerHTML = addCategories(obj.categories);
prepareList();
See this http://jsfiddle.net/uqgd07kp/3/ for a working example.