Javascript trying to iterate through an array of objects to display their properties

Question

I have a json object that contains an array of objects with similar properties. I'm trying to iterate through the array for each of the objects and display their individual properties. Here's what I have so far...

Object.keys(jsoncont)
    .sort(function(a,b) {
        return b.localeCompare(a)
})
.forEach(function(key) {
    var val = jsoncont[key];

    $('#contactSearchResults').html('<div class="resultset"><input type="radio" name="customer_c_id" value="' + val.id + '" /></div><div class="resultset">' + val.first + '</div><div class="resultset">' + val.last + '</div><div class="resultset">' + val.email + '</div>');

});

This is only returning one object in the array. Can someone explain to me how to iterate through all the objects instead of just returning the first result in the key?

Just as a side note, be mindful when using `Object.keys` as it's only supported in ***IE >= 9***. For more information, see [this](http://stackoverflow.com/questions/13723805/ie-issue-object-keysvalue-length-not-supported) question. — War10ck, Dec 18 '13 at 21:06

score 1 · Accepted Answer · answered Dec 18 '13 at 21:02

Probably because you're setting the content of #contactSearchResults each iteration. Try changing it to append if you want to print them all out to the DOM

$('#contactSearchResults').append('<div class="resultset"><input type="radio" name="customer_c_id" value="' + val.id + '" /></div><div class="resultset">' + val.first + '</div><div class="resultset">' + val.last + '</div><div class="resultset">' + val.email + '</div>');

score 0 · Answer 2 · answered Dec 18 '13 at 21:03

try this:

var allitems = "";
Object.keys(jsoncont)
.sort(function(a,b) {
    return b.localeCompare(a)
})
.forEach(function(key) {
    var val = jsoncont[key];

    allitems += '<div class="resultset"><input type="radio" name="customer_c_id" value="' + val.id + '" /></div><div class="resultset">' + val.first + '</div><div class="resultset">' + val.last + '</div><div class="resultset">' + val.email + '</div>';
});
$('#contactSearchResults').html(allitems)

Javascript trying to iterate through an array of objects to display their properties

2 Answers2