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


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -