JQuery iterate through JSON array and insert into dynamic HTML SELECT

Question

For the life of me, I have no idea why this isn't working - I've tried multiple ways of trying to insert the JSON data into the <option> code each time it doesn't work like that - it merely outputs the HTML text and not inside a <select> drop down

$.getJSON( "group.asp", function( data ) {
    $('#msgBox').html($('#msgBox').html() + '<div class="table-row"><div class="table-col-l">Name:</div><div class="table-col-r"><select id="name1"><option>SELECT</option>')
    $(data).each(function(index, element) {
        console.log(element)
        $('#msgBox').html($('#msgBox').html() + '<option>'+element.name+'</option>');
    });
    $('#msgBox').html($('#msgBox').html() + '</select></div></div>')
})

I've tried creating it as a separate variable that is inserted after the .each function but that didn't work either.

Rajaprabhu Aravindasamy · Accepted Answer · 2015-08-10 09:54:36Z

3

Try to do a proper string concatenation before using .html(),

$.getJSON( "group.asp", function( data ) {
    var str = $('#msgBox').html();
    str += '<div class="table-row"><div class="table-col-l">Name:</div><div class="table-col-r"><select id="name1"><option>SELECT</option>';
    $(data).each(function(index, element) {
        str += '<option>'+element.name+'</option>';
    });
    str += '</select></div></div>';
    $('#msgBox').html(str);
})

answered Aug 10, 2015 at 9:54

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

2 Comments

Hyperjase Over a year ago

That works perfectly, the only thing I didn't think of trying (and really should have!). Will need this for other projects so more than one issue solved in one go. Many thanks!

Rajaprabhu Aravindasamy Over a year ago

@Hyperjase Glad to help! :)

Collectives™ on Stack Overflow

JQuery iterate through JSON array and insert into dynamic HTML SELECT

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related