使用JQuery在中的数组

I have a phone array that contains data from json:

我有一个包含来自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)."
    },

I wrote code to display that array as list ul li:

我编写代码将该数组显示为列表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(''));

}

It displays data as I'm want, but on top of the list it displays:

它显示我想要的数据,但在列表的顶部显示:

[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/>

How to remove this [object Object]?

如何删除此[对象]?

3 个解决方案

#1

The reason is you are pushing to the same array phone which already have JSON objects inside. Instead use a new array.

原因是你正在推送已经有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(''));

#2

The problem is your phone array already contains a list of objects, you are adding the html to the existing set of elements.

问题是您的手机阵列已经包含对象列表,您将html添加到现有元素集。

So when you say phone.join() the objects will be rendered as [Object object].

所以当你说phone.join()时,对象将呈现为[Object object]。

You can create a fresh array from the source phone using .map() like

您可以使用.map()等从源手机创建一个新阵列

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

#3

Append each html directly to the UL every iteraction. As below

每次迭代时将每个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>" );
  });}

#1