SHINHAN SHINHAN - 9 months ago 50
jQuery Question

How to properly append json result to a select option

How to properly append json result to a select option,

sample json data

enter image description here

Ajax code:

url: 'sessions.php',
type: 'post',
datatype: 'json',
data: { from: $('#datepicker_from').val().trim(), to: $('#datepicker_to').val().trim() },
sucess: function(data){
var toAppend = '';
//if(typeof data === 'object'){
for(var i=0;i<data.length;i++){
toAppend += '<option>'+data[i]['id']+'</option>';

html code:

<select id="sessions"></select>

I already set to my php file

header("Content-Type: application/json");

Answer Source

Use $.each to iterate through your JSON array that you receive from ajax call.

Note:- the spelling of success, you have written sucess.

 success: function(data){
            var toAppend = '';
           toAppend += '<option>''</option>';


You can do append to the DOM directly inside the each loop but it is always better to concatenate with string and then adding to the DOM later. This is a cheaper operation since you are accessing DOM only once in this case. This might not work in some complex scenarios though.