SHINHAN SHINHAN - 12 days ago 6
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:

$.ajax({
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>';
}
//}
$('#sessions').append(toAppend);
}
});


html code:

<p>Sessions:
<select id="sessions"></select>




I already set to my php file

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

PSL PSL
Answer

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 = '';
           $.each(data,function(i,o){
           toAppend += '<option>'+o.id+'</option>';
          });

         $('#sessions').append(toAppend);
        }

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.