How to populate dropdownlist with JSON data as ajax response in jQuery

try to change the jquery method variable, it might be causing the problem (i.e., you are using the data variable coming from the ajax callback PLUS are then trying to assign it to the item object in the jquery method - changed to obj):

        $.ajax({            type: "GET",            url:"/demo_trial_application/json_source",            dataType: "json",            success: function (data) {                $.each(data.aaData,function(i,obj)                {                 alert(obj.value+":"+obj.text);                 var div_data="<option value="+obj.value+">"+obj.text+"</option>";                alert(div_data);                $(div_data).appendTo('#ch_user1');                 });                  }          });        });

I use "for"

var List; jQuery.ajax({    url: "/demo_trial_application/json_source",    type: "POST",    dataType: "json",    async: false,    success: function (data) {    List = data.aaData        $('#ch_user1').empty();        $('#ch_user1').append('<option value="">All</option>');        for (i in List ) {            $('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');        }    }});

Working with Laravel this is my solution:

$("#YOUR_DIV").on("change", function(){    var selected = $(this).val();    makeAjaxRequest(selected);})function makeAjaxRequest(opts){    $.ajax({        type: "GET",        url : '{{ action('YOUR_CONTROLLER@YOUR_FUNCTION') }}',        data: { opts: opts },        success: function(data) {            NEW_JS_FUNCTION(data);        }    });}function NEW_JS_FUNCTION(params) {    $('#YOUR_DIV').empty();    $('#YOUR_DIV').append('<option value="">ALL</option>');    params.forEach(function(entry){        $('#YOUR_DIV').append('<option value="' + entry.KEY+ '">' + entry.TEXT + '</option>');    });}

It works. Hope this can help.