javascript - このような 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>')
            })
        });
    });
});