How to properly append json result to a select option

jquery, json

Solution

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.

Problem

How to properly append json result to a select option, sample json data 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"); ```

Original source