阵列输入 <ul><li> 使用jQuery

Question

I have a phone array that contains data from 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:

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] ?

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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