How to put this JSON response into a dropdown list

Question

I am trying to put this data I get back from the server into a dropdown list but don't know how to do it since each object name starts with a random ID. This is what I am trying to do here:

 $("#CampaignOpenActionSubscriber_campaign_id").change(function() {
   var el = $(this);

   $.ajax({
     type: 'POST',
     url: "Dropdownlist",
     data: 'csrf_token=' + $('meta[name=csrf-token-value]').attr('content') +'&Selectedcampaign_id=' + el.val(),
     success: function (response) {
       var jsonResponse = $.parseJSON(response);
       for(var i=0; i< jsonResponse.length; i++){
         $("#selectCourse").append(
           $('<option>').text(jsonResponse[i]).val(jsonResponse[i])
         );               
       }
     }
   });
 });

and this is what I get back from my JSON response... :

 {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"}

How would I put this into a dropdown list?

Possible duplicate of [What is the best way to add options to a select from an array with jQuery?](http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery) — Heretic Monkey, Apr 19 '17 at 14:59

score 4 · Accepted Answer · answered Apr 19 '17 at 14:51

To achieve this you need to use a for.. in loop to iterate over the keys of the object returned from your AJAX call. Try this:

var jsonResponse = {
  288878: "FOO",
  288881: "BAZZ",
  288882: "YOLLO"
}

var html = '';
for (var key in jsonResponse) {
  html += '<option value="' + key + '">' + jsonResponse[key] + '</option>';
}
$("#selectCourse").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectCourse"></select>

Also note that JSON.parse() is redundant in your AJAX success handler as jQuery will deserialise the response for you when JSON is detected. You may just need to add dataType: 'json' to the options if this does not happen automatically.

Yosvel Quintero · Answer 2 · 2017-04-19T15:06:37.830

You can loop over the jsonResponse object using jQuery.each() and populate all the select options with jQuery.append().

Code:

var $select = $('#selectCourse'),
    jsonResponse = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"};

$.each(jsonResponse, function(key, value) {
    $select.append('<option value=' + key + '>' + value + '</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectCourse">
  <option value="">Select...</option>
</select>

Brissy · Answer 3 · 2017-04-19T15:05:10.273

0

Use for ... in loop

var options = '';
for( var key in jsonResponse){
   options += '<option value ="key">' + jsonResponse[key] +'</option>
};
$("#selectCourse").html(options)

edited Apr 19 '17 at 15:05

answered Apr 19 '17 at 14:54

Brissy

349
1
2
10

3

This seems to have some pretty fundamental syntax issues...? – Rory McCrossan Apr 19 '17 at 14:55
@RoryMcCrossan yeah, misstyped from the phone, sorry – Brissy Apr 19 '17 at 15:04

score 0 · Answer 4 · answered Apr 19 '17 at 14:58

Can use $.each( object, function(key, value){}) to iterate an object

var data = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"};

$.each(data, function(prop, val){
   $('select').append( $('<option>',{text:val, value:prop}))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

How to put this JSON response into a dropdown list

4 Answers4