Array in <ul><li> using 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]?

Your phones is an array of object! What you need? append li directly to $('#phonesList') rather than pushing it to phones. — Dhaval Marthak
– Dhaval Marthak, Commented May 13, 2015 at 8:50

Zee · Accepted Answer · 2015-05-13 08:57:19Z

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

answered May 13, 2015 at 8:57

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-05-13 08:56:20Z

2

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

answered May 13, 2015 at 8:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Lukesoft · Accepted Answer · 2015-05-13 09:00:10Z

2

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

answered May 13, 2015 at 9:00

Lukesoft

9631 gold badge12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Array in <ul><li> using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related