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 question. — War10ck
– War10ck, Commented Dec 18, 2013 at 21:06

Kevin · Accepted Answer · 2013-12-18 21:02:41Z

1

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

answered Dec 18, 2013 at 21:02

Kevin

2,0221 gold badge16 silver badges10 bronze badges

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

Comments

Mehran Hatami · Accepted Answer · 2013-12-18 21:03:17Z

0

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)

answered Dec 18, 2013 at 21:03

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

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