CODEWITHSUNDEEP
javascriptjqueryjson
Michael DaSilva
Michael DaSilva

Reputation: 157

How to put this JSON response into a dropdown list

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?

Upvotes: 1

Views: 1736

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19060

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>

Upvotes: 2

Brissy
Brissy

Reputation: 359

Use for ... in loop

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

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 4

Related Questions