How do render data as indented list in html using jquery? -
i have json data in second page. how display data indented list?
do have use accordion widget jquery ?
i newbie in ui development. please excuse simple query this. please show me direction on how proceed in implementing this. in advance.
$.ajax({ url: "data/widgetdata.json", datatype: "text", success: function(data) { var jsondata = $.parsejson(data); $.each(jsondata, function(i, item) { $.each(this, function(k, v) { childelements = v['children'] $('.header span').text(v.title) $.each(childelements,function(key,value) { // $('#parent1').text(childelements[key].label + '('+childelements[key].devicename+')') if(childelements[key].children){ (var = 0; < childelements[key].children.length; i++) { }; } }); }); }); } });
js:
$.ajax({ url: "data/widgetdata.json", datatype: "text", success: function(data) { var jsondata = $.parsejson(data); process(jsondata.widgetdata, 0, '#list'); //it can process(jsondata, 0, '#list'); //depends on console.log(jsondata) returns } }); function process(items, level, element) { $(element).append('<ul></ul>'); (var = 0; i<items.length; i++ ) { $(element + '> ul' ).append('<li class="' + level + '-' + + '"> <img height="10" width="10" style="background:' + items[i].color +'">' + (items[i].label ? items[i].label : items[i].title) + '('+ (items[i].devicename ? items[i].devicename : "") +')' + '<span style="float:right">'+ (items[i].objects ? items[i].objects : "") +'</span></li>'); if(items[i].children) { process(items[i].children, level+1, '.' + level + '-' + i); } } }
html:
<div id="list"> </div>
http://jsfiddle.net/edkvq97f/27/
modify need. put data instead of json.widgetdata