javascript - How to parse a Json list like this and display its elements in HTML? -


i got json object using jquery's getjson() method that:

<script>  $(document).ready(function(){    $("button").click(function(){     $.getjson(the_api_url, {}, function(data) {         //     });   });   });  });  </script> 

the data array list, , format this:

[     {         id : "001",         name : "apple",         class : "fruit",         colour : "red"     },     {         id : "002",         name : "melon",         class : "fruit",         colour : "green"     },     {         id : "003",         name : "banana",         class : "fruit",         colour : "yellow"     } ] 

i new javascript , don't know how parse , display in html page. guys me code in '//do something' part?

add html element like

<ul id="ct"></ul> 

then

$(document).ready(function(){      $("button").click(function(){         $.getjson(the_api_url, {}, function(data) {             var $ul = $('#ul')             $.each(data, function(idx, item){                 $ul.append('<li style="color: ' + item.color + '">' + item.name + '-' + item['class'] +'</li>')             })         });     }); });