jQuery从JSON响应向UL元素的LI添加值和文本

Question

我们希望将json响应绑定到li元素，每个元素的值为id，文本为名称。

$.ajax({
  type: "GET",
  url: "/api/xyz/",
  dataType: "json",
  success: function(response) {
    var items = [];
    $.each(response, function(i, item) {
      items.push('<li</li>",{value:item.id,text:item.name}');
    });
    $('#formFieldCity ul').append(items.join(''));
  }
});

但没有成功，我没有看到任何约束力。谁能帮忙？

Answer 1

你应该这样写：

$.each(data, function(i, item) {
        items.push('<li id="'+item.id+'">'+item.name+'</li>');
    });

Answer 2

我想你的意思

是

     var list = $('#formFieldCity ul'); //caching
     $.ajax({
       type: "GET",
       url: "/api/xyz/",
       dataType: "json",
       success: function (response) {
            var items = [];
            //Misplaced variable here: data instead of response
            $.each(response, function(i, item) {
                   var mapped = {value:item.id,text:item.name};
                   items.push(mapped)
                   list.append("<li id=""+item.id+"">"+item.name+"</li>");
            });
       }
    });

这基本上会在您的 HTML 中打印一个 json。希望我得到了你想要的。

编辑：如果你的响应是一个数组，请考虑使用一个简单的 for 循环，它比 jQuery 快大约 8 倍。

for(var i=0; i<response.length; i++){
    var mapped = {value:response[i].id,text:response[i].name};
    items.push(mapped)
    list.append("<li id=""+mapped.value+"">"+mapped.text+"</li>");
}