Question

Here’s the code:

var object = [
  {'item1': 'value1a', 'item2':'value2a', 'item3':'value3a'},
  {'item1': 'value1b', 'item2':'value2b', 'item3':'value3b'},
];


$.each(object, function(key,value) { 
  $('.my-div').html('<li>'+ value.item1 + '</li>');
});

This outputs only one <li>value1b</li>. For some reason skips over all except the last iteration.

Thoughts?

Answer 1

It’s overwriting all your HTML instead of appending it.

Change

$('.my-div').html('<li>'+ value.item1 + '</li>');

to

$('.my-div').append('<li>'+ value.item1 + '</li>');

Working demo: http://jsfiddle.net/AlienWebguy/hpLa6/1/