Question

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

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);
     });

Answer 2

你JSON中有一个错误。我已经改变了一点逻辑来生成UL和LI

    var data = [{
    "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"
  }];
  var items;
  $('body').html("<ul></ul>");
for(dat in data){
$("ul").append('<li id='+data[dat]["id"]+'>'+data[dat]["mesi"]+'</li>')

}

JsFiddle

JSON只使用最后一个<li>元素

2 个答案: