distributing json array output to each <li>

Question

I have a JSON output and i want to show each item inside each <li>.

The JSON output looks like this:

var data = [
{
    "MachineID":"171914",
    "Cost":"13,642.41",
    "Currency":"PHP"
},
{
    "MachineID":"172233",
    "Cost":"1,367.73",
    "Currency":"PHP"
},
{
    "MachineID":"41116",
    "Cost":"2,608.20",
    "Currency":"PHP"
},
{
    "MachineID":"178077",
    "Cost":"1,517.04",
    "Currency":"PHP"},
{
    "MachineID":"176430",
    "Cost":"20,876.72",
    "Currency":"PHP"
}
]

And my code is this:

$.each(data, function(i, obj) {
    $.each(obj, function(i, val) {
      $('li').append(obj.MachineID); 
    });
});

Now the result shows like this:

   Foo 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430
   Bar 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430

I may have overlooked something on jQuery.each call and I need only to show one MachineID per <li>, the output should be like this:

    Foo 171914
    Bar 172233
    Baz 41116
    Qux 178077

and so on..

2 revs user1106925 · Accepted Answer · 2012-01-10 16:24:22Z

4

If these are existing li elements, the best way would be to select the li elements, iterate them, and use the index in the iteration to grab the data.

$('li').slice(0,data.length)
       .each(function(i,el){
           $(this).append(data[i].MachineID);
       });

I used .slice() so that if there are more li elements than data, it won't try to access non-existent data.

Demo: http://jsfiddle.net/MYC4J/

If the <li> elements do not yet exist, then you'd need to create them:

var ul = $('ul');

$.each(data,function(i,obj) {
    $('<li>',{text:obj.MachineID}).appendTo(ul);
});

Demo: http://jsfiddle.net/MYC4J/1/

edited Jan 10, 2012 at 16:24

community wiki

2 revs
user1106925

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

Comments

Sven Bieder · Accepted Answer · 2012-01-10 16:12:25Z

0

Because you go through each object and each property you append for every object 3 times the MashineId.

You only need 1 $.each-loop and append the MashineId to the right li.

Something like that:

$.each(data, function(index, value){
   $("ul li:nth-child(" + (index+1) + ")").append(value.MashineId);
});

nth-child() selects the li (1-based index) and appends the MashineId. That is for the case that your MashineIds are simply added to the next li. Perhaps you need for your case another logic to find the right li.

edited Jan 10, 2012 at 16:12

answered Jan 10, 2012 at 16:00

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

distributing json array output to each <li>

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related