How do render data as indented list in html using jquery?

Question

I have json data in my second page. How do i display those data as indented list?

Do I have to use accordion widget from jquery ?

I am newbie in UI development. So please excuse my simple query like this. Please show me a direction on how to proceed in implementing this. Thanks 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){
                                     for (var i = 0; i < childElements[key].children.length; i++) {

                                     };
                                }
                            });


                        });
                    });
                }
            });

if you have more questions, I will be available in 2-3 hours — Said Kholov
– Said Kholov, Commented Apr 23, 2015 at 5:53

Said Kholov · Accepted Answer · 2015-04-24 03:19:27Z

3

JS:

   $.ajax({
        url: "data/widgetData.json",
        dataType: "text",
        success: function(data) {
            var jsondata = $.parseJSON(data);
            process(jsondata.widgetData, 0, '#list');
            //it can be process(jsondata, 0, '#list');
            //depends on what console.log(jsonData) returns
        }
    });

function process(items, level, element) {

       $(element).append('<ul></ul>');
       for (var i = 0; i<items.length; i++ ) {

           $(element + '> ul' ).append('<li class="' + level + '-' + i + '"> <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 it as you need. Just put your data instead of json.widgetData

edited Apr 24, 2015 at 3:19

answered Apr 23, 2015 at 5:44

Said Kholov

2,4961 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

user Over a year ago

I am reading json data from local file via ajax.

var json;     	$.ajax({                     url: "data/widgetData.json",                     dataType: "text",                     success: function(data) {                         json = $.parseJSON(data);                     }                 });

I get error Cannot read property 'widgetData' of undefined

Said Kholov Over a year ago

It should be datatype: json. And when you do console.log(json) it shouldn't return a bunch text, it should be an object. As soon as you get the object, the code will work

user Over a year ago

I have added how I am reading json data using ajax. Need to append those elements inside that function. Can you tell me how to append to container element dynamically?

guest271314 Over a year ago

@SaidKholov Which children array within json file contains six items ?

Said Kholov Over a year ago

I didn't copy, I didn't even have a look at it ;). I don't know any other way of doing it

|

guest271314 · Accepted Answer · 2015-04-23 10:15:04Z

Try

    var container = $("#container");
    $.getJSON("data/widgetData.json")
    .then(function(data) {
      $.map(data, function(val, key) {
        container.append("<span class=title>" + val[0].title + "<span>")
        .css("font-size", "16px");
        $.map(val[0].children, function(value, index) {
          var items = function(value, index) {
            var html = "<ul class=item-" + index + " style=list-style:none;>"
                       + "<li><img style=background-color:" + value.color 
                       + ";width:1em;height:1em; /> " + value.label 
                       + (value.deviceName ? "(" + value.deviceName + ")" : "")
                       + "<span style=position:absolute;"
                       + "display:inline-block;left:"
                       + "calc("+(window.innerWidth - 200)+"px) >" 
                       + "☍" + value.objects + "</span></li></ul>";
            return html
          }; 
          container.append(items(container, value, index)); 
          if (!!value.children) {
            var res = $.map(value.children, function(v, k) {
              return items( v, index)
            });
            container.find("[class$="+index+"]").append(res.join(""));
          }
        });
      });
    }, function(jqxhr, textStatus, errorThrown) {
      console.log(errorThrown)
    });

var data = {
  "widgetData": [{
    "title": "Example",
    "status": "active",
    "children": [{
      "label": "DashboardVirtualSamePool",
      "deviceName": "device101",
      "color": "red",
      "status": "active",
      "objects": 10,
      "children": [{
        "label": "DashboardVirtualSamePool",
        "color": "red",
        "status": "inactive",
        "objects": 10
      }]
    }, {
      "label": "DashboardVirtualSamePool",
      "deviceName": "device101",
      "color": "green",
      "status": "active",
      "objects": 10,
      "children": [{
        "label": "DashboardVirtualSamePool",
        "color": "green",
        "status": "inactive",
        "objects": 10
      }, {
        "label": "DashboardVirtualSamePool",
        "color": "green",
        "status": "active",
        "objects": 10
      }, {
        "label": "DashboardVirtualSamePool",
        "color": "green",
        "status": "inactive",
        "objects": 10
      }]
    }, {
      "label": "DashboardVirtualSamePool",
      "deviceName": "device101",
      "color": "blue",
      "status": "active",
      "objects": 10,
      "children": [{
        "label": "DashboardVirtualSamePool",
        "color": "blue",
        "status": "inactive",
        "objects": 10
      }, {
        "label": "DashboardVirtualSamePool",
        "color": "blue",
        "status": "inactive",
        "objects": 10
      }, {
        "label": "DashboardVirtualSamePool",
        "color": "blue",
        "status": "active",
        "objects": 10
      }]
    }, {
      "label": "DashboardVirtualSamePool",
      "deviceName": "device101",
      "color": "blue",
      "status": "unknown",
      "objects": 10
    }]
  }]
};

var container = $("#container");

$.map(data, function(val, key) {
  container.append("<span class=title>" + val[0].title + "<span>")
.css("font-size", "16px");
  $.map(val[0].children, function(value, index) {
var items = function(value, index) {
    var html = "<ul class=item-" + index + " style=list-style:none;>"
                 + "<li><img style=background-color:" + value.color 
                 + ";width:1em;height:1em; /> " + value.label 
                 + (value.deviceName ? "(" + value.deviceName + ")" : "")
                 + "<span style=position:absolute;"
                 + "display:inline-block;left:"
                 + "calc("+(window.innerWidth - 200)+"px) >" 
                 + "☍" + value.objects + "</span></li></ul>";
    return html
  }; 
  container.append(items(value, index)); 
     if (!!value.children) {
       var res = $.map(value.children, function(v, k) {
         return items( v, index)
       });
       container.find("[class$="+index+"]").append(res.join(""));
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="container"></div>

jsfiddle http://jsfiddle.net/gmdv4Lf5/4/

This looks good. Thanks.Please check my updated ajax code. can you show your example with that code?
i need to display its corresponding children also if its present.
it is calling items.call(container, value, index); again and adding the extra elements. it should add only one element for first parent and three elements for other two parents as per json data. But for second parents it is adding more than required.How do i fix this?

Collectives™ on Stack Overflow

How do render data as indented list in html using jquery?

2 Answers 2

14 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related