using $.each jquery to create html select option in ajax success

Question

I have a bootstrap modal that contains a form. This form will be using a lot of data from my database, So I use php to get them like this :

public function get_view_for_inspection_report_belum_eor(){
    $q = $this->inspection->get_view_for_inspection_report_belum_eor();
    echo json_encode($q);
}

It gives me a new json code like this :

[{
"NO_INSPECTION": "5",
"NO_SURAT": "00005",
"DATE_OF_DESCRIPTION": "2016-01-04 21:00:37",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "3",
"VESSEL": "MV WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SURFONIC AGM 550",
"TARIFF": "0.00",
"COMMENTS": "Test Surveyor 1\r\n\r\nTest Surveyor 2"
 }, {
"NO_INSPECTION": "4",
"NO_SURAT": "00004",
"DATE_OF_DESCRIPTION": "2016-01-04 19:33:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "REVERTING",
"TARIFF": "0.00",
"COMMENTS": "Test Saja"
 }, {
"NO_INSPECTION": "3",
"NO_SURAT": "00003",
"DATE_OF_DESCRIPTION": "2016-01-04 19:26:15",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "2",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SUBASA",
"TARIFF": "0.00",
"COMMENTS": "Test surveyor 1"
 }, {
"NO_INSPECTION": "2",
"NO_SURAT": "00002",
"DATE_OF_DESCRIPTION": "2016-01-04 15:15:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "2222222",
"NAMA_CLEAN_ITEM": "TEXANOL ESTER ALKOHOL",
"TARIFF": "0.00",
"COMMENTS": "Test"
 }, {
"NO_INSPECTION": "1",
"NO_SURAT": "00001",
"DATE_OF_DESCRIPTION": "2016-01-04 19:13:07",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "1",
"VESSEL": "MV.WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "N-BUTANOL",
"TARIFF": "0.00",
"COMMENTS": "Test survey 1\r\nTest survey 2"
}]

This is my ajax

$('#add_eir').click(function () {
    action = "TAMBAH";
    $.ajax({
        url : "<?= site_url('admin/c_admin_eir/get_view_for_inspection_report_belum_eor'); ?>",
        type : "POST",
        dataType : "json",
        success : function(response){
            $("#dynamic_no_inspection").find(':first-child').remove();

            //  CREATE A SELECT OPTION
            $("#dynamic_no_inspection").html('<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">' +
            '<option></option>' +

             // How to create an option based ajax response  ?

            '</select>');
        }
    });


 });

Now, the question is? How to make the option based the ajax response using jquery. I expected the <option> be like this :

<option value="response[i].NO_INSPECTION" . "> response[i].NO_SURAT ( response[i].PREFIX - response[i].SERIAL_NUMBER ) </option>

I knew in php, just loop using

foreach ($all_inspection_belum_eor as $row) :
   echo "<option value=" . "$row->NO_INSPECTION" . "> $row->NO_SURAT ( $row->PREFIX - $row->SERIAL_NUMBER ) </option>";
endforeach;

For any help, it so appreciated.

Answer 1

You can refer below code to take an idea about how we can append an <option> dynamically to a <select> box:

 $(document).ready(function(){ $("#dynamic_no_inspection").html('<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">' + '</select>'); var response = [{ "NO_INSPECTION": "5", "NO_SURAT": "00005", "DATE_OF_DESCRIPTION": "2016-01-04 21:00:37", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": "surveyor", "INSULATION": "3", "VESSEL": "MV WAN HAI 171", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "SURFONIC AGM 550", "TARIFF": "0.00", "COMMENTS": "Test Surveyor 1\\r\\n\\r\\nTest Surveyor 2" }, { "NO_INSPECTION": "4", "NO_SURAT": "00004", "DATE_OF_DESCRIPTION": "2016-01-04 19:33:23", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": null, "INSULATION": "3", "VESSEL": "WAN HAI 202", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "REVERTING", "TARIFF": "0.00", "COMMENTS": "Test Saja" }, { "NO_INSPECTION": "3", "NO_SURAT": "00003", "DATE_OF_DESCRIPTION": "2016-01-04 19:26:15", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": null, "INSULATION": "2", "VESSEL": "WAN HAI 202", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "SUBASA", "TARIFF": "0.00", "COMMENTS": "Test surveyor 1" }, { "NO_INSPECTION": "2", "NO_SURAT": "00002", "DATE_OF_DESCRIPTION": "2016-01-04 15:15:23", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": null, "INSULATION": "3", "VESSEL": "WAN HAI 202", "PREFIX": "EOLU", "SERIAL_NUMBER": "2222222", "NAMA_CLEAN_ITEM": "TEXANOL ESTER ALKOHOL", "TARIFF": "0.00", "COMMENTS": "Test" }, { "NO_INSPECTION": "1", "NO_SURAT": "00001", "DATE_OF_DESCRIPTION": "2016-01-04 19:13:07", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": "surveyor", "INSULATION": "1", "VESSEL": "MV.WAN HAI 171", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "N-BUTANOL", "TARIFF": "0.00", "COMMENTS": "Test survey 1\\r\\nTest survey 2" }] //code to create an options for(i=0;i<response.length;i++) { var optionValue = response[i].NO_INSPECTION; var optionText = response[i].NO_SURAT +' ('+ response[i].PREFIX +'-'+ response[i].SERIAL_NUMBER +')'; var optionString = "<option value='"+optionValue+"'>"+optionText+"</option>"; $("#dynamic_no_inspection select").append($(optionString)); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="dynamic_no_inspection"> </div> 

Answer 2

$('#add_eir').click(function() {

  //get select element
  var $select = $('#no_inspection');

  //clear current options
  $select.children().remove();

  //loop through response array
  $.each(response, function() {
    //create new option and add to select
    var $opt = $('<option/>');
    $opt.val(this.NO_INSPECTION);
    $opt.text(this.NO_SURAT + '(' + this.PREFIX + '-' + this.SERIAL_NUMBER + ')');
    $select.append($opt);
  });

});

https://jsfiddle.net/qspbb4wg/

If you use jQuery.each function then this is each object in the array. Move the code above into your ajax.success handler.

Answer 3

I would use the native array methods to perform the task so you can reduce your array into a single string that can be innerHTML'd or .html'd into the select list once processing is complete.

 var options = [{ "NO_INSPECTION": "5", "NO_SURAT": "00005", "DATE_OF_DESCRIPTION": "2016-01-04 21:00:37", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": "surveyor", "INSULATION": "3", "VESSEL": "MV WAN HAI 171", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "SURFONIC AGM 550", "TARIFF": "0.00", "COMMENTS": "Test Surveyor 1\\r\\n\\r\\nTest Surveyor 2" }, { "NO_INSPECTION": "4", "NO_SURAT": "00004", "DATE_OF_DESCRIPTION": "2016-01-04 19:33:23", "NAMA_SURVEYOR1": "surveyor", "NAMA_SURVEYOR2": null, "INSULATION": "3", "VESSEL": "WAN HAI 202", "PREFIX": "EOLU", "SERIAL_NUMBER": "1111111", "NAMA_CLEAN_ITEM": "REVERTING", "TARIFF": "0.00", "COMMENTS": "Test Saja" }] // this function will loop through your option array and return a single html // string using the native Array.reduce method function createOptions(options) { return options.reduce(function(ret, option) { // in here you have access to any of the option properties return ret + '<option value="' + option['NO_INSPECTION'] + '" . "> ( ' + option['PREFIX'] + ' - ' + option['SERIAL_NUMBER'] + ' ) </option>'; }, ''); } // pretend this is your ajax callback (it will happen some time in the first second of load window.setTimeout(function(){ // write the option html to the select element $('#dynamic_no_inspection').html(createOptions(options)); }, Math.random() * 1000 ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="dynamic_no_inspection"> <option>please select</option> </select>