<ul><li> 中的数组使用 JQuery答案

【问题标题】：Array in <ul><li> using JQuery<ul><li> 中的数组使用 JQuery
【发布时间】：2015-07-24 10:50:25
【问题描述】：

我有一个包含 json 数据的电话数组：

var phones = [
    {
        "age": 0,
        "id": "motorola-xoom-with-wi-fi",
        "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
        "name": "Motorola XOOM\u2122 with Wi-Fi",
        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
    },

我编写了代码来将该数组显示为列表 ul li：

function createList_Task_4(){
  $.each(phones, function(i, phone){
      phones.push("<li>" + phone.age +"</li><br><li>" + phone.id +
      "</li><br><img src='" + phone.imageUrl + "'/></li><br><li>" + phone.name + "</li><br><li>" + phone.snippet +"</li>" );
  });
  $('#phonesList').append(phones.join(''));

}

它显示我想要的数据，但它显示在列表的顶部：

[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]

 <ul>
    <li>0</li>

    <li>motorola-xoom-with-wi-fi</li>
 <ul/>

如何删除这个[object Object]？

【问题讨论】：

您的phones 是一个对象数组！你需要什么？将li 直接附加到$('#phonesList')，而不是将其推送到phones。
为什么<br> 在<li>s 之间？

标签： javascript jquery html css arrays

【解决方案1】：

问题是您的 phone 数组已经包含一个对象列表，您正在将 html 添加到现有的元素集。

所以当你说 phone.join() 时，对象将被渲染为[Object object]。

您可以使用 .map() 从源 phone 创建一个新数组

function createList_Task_4() {
    var array = $.map(phones, function (phone, i) {
        return "<li>" + phone.age + "</li><li>" + phone.id +
            "</li><br><img src='" + phone.imageUrl + "'/></li><li>" + phone.name + "</li><li>" + phone.snippet + "</li>";
    });
    $('#phonesList').append(array.join(''));
}

【讨论】：

【解决方案2】：

原因是您正在推送到同一个数组phone，其中已经有 JSON 对象。而是使用新数组。

     var arr = [];
    function createList_Task_4(){
      $.each(phones, function(i, phone){
        arr.push("<li>" + phone.age +"</li><br><li>" + phone.id +
                 "</li><br><img src='" + phone.imageUrl + "'/></li><br><li>" + phone.name + "</li><br><li>" + phone.snippet +"</li>" );
    });
    $('#phonesList').append(arr.join(''));

【讨论】：

【解决方案3】：

每次迭代都将每个 html 直接附加到 UL。如下

function createList_Task_4(){
  $.each(phones, function(i, phone){
        $('ul#phonesList').append("<li>" + phone.age +"</li><br><li>" + phone.id +
      "</li><br><img src='" + phone.imageUrl + "'/></li><br><li>" + phone.name + "</li><br><li>" + phone.snippet +"</li>" );
  });}

【讨论】：