javascript - JSON 渲染为 HTML，仅包含最后一个 <li> 元素

Question

请阅读本文末尾的问题，谢谢。 我似乎无法找到为什么 JSON 只渲染 JSON 中的最后一个 li 元素。我是新手，我需要帮助!

HTML: 只是一个<a href="#" id="clickme">Get JSON</a>

这是 JSON 对象数组

{"id":"1","mesi":"mesima 0","done_bool":"1"},{"id":"2","mesi":"mesima 1","done_bool":"0"},{"id":"3","mesi":"mesima 2 ","done_bool":"1"},{"id":"4","mesi":"mesima 3","done_bool":"1"}

Ajax 脚本:

$(function(){

    $('#clickme').click(function (){
        //fetch json file


$.ajax({
    url:'data.json',
    dataType: 'json',
    success: function(data){

        var items = '';
        $.each(data, function (key, val) {
            items += '<li id=" ' + key + '">' + val + '</li>';
        });
        ul = $('<ul/>').html(items);
        $('body').append(ul);

    },
    statusCode: {
        404: function(){
            alert('there was a problem with the server. try again in a few secs');
        }
    }

    });

    });
});

最后，我期望收到这些项目的列表，其中“done_bool”将是一个单选复选框，每个 li 基本上都是一个任务，它要么“完成”(1)，要么“未完成”(0)。

Answer 1

我已经发布了这个答案，但它被删除/删除了..我不知道为什么..但我希望它对你有帮助..

$.ajax({
            url: 'data.json',
            dataType: 'json',
            success: function(data){

                var html = "<ul>";
                items = data.map(function(obj){
                   html += "<li id='" + obj.id + "'>" + obj.mesi + "</li";
                });
                html += "</ul>";

                $('body').append(html);
     });