如何解析这样的Json列表并以HTML显示其元素？

Question

我通过使用jQuery的getjson（）方法获得了一个Json对象，如下所示：

<script>

$(document).ready(function(){

  $("button").click(function(){
    $.getJSON(the_api_url, {}, function(data) {
        // do something
    });
  });
  });

});

</script>

数据是一个数组列表，其格式如下：

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

我是JavaScript新手，不知道如何解析并将其显示在html页面中。你们能帮我做“ //做某事”部分中的代码吗？

Answer 1

添加一个HTML元素，例如

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

然后

$(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>')
            })
        });
    });
});