Search code examples
javascriptjqueryajaxdatatablesbootstrap-multiselect

Bootstrap Multiselect and $.ajax GET with nested objects

I'm struggling to $.ajax GET nested objects and dynamically send the data to Bootstrap Multiselect dropdown select options. Similar to .. Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown bootstrap multiselect not working on api json bind in Ajax call in jquery

More specific, I want to multi select the object "company" from data.php (with DataTable Editor):

{"data":[{"DT_RowId":"row_1","company":"FirstCompany","webtechnology":"Contao",...},
{"DT_RowId":"row_2","company":"SecondCompany","webtechnology":"Wordpress",...},
{"DT_RowId":"row_3","company":"ThirdCompany","webtechnology":"Custom",...},
{"DT_RowId":"row_4","company":"FourthCompany","webtechnology":"TYPO3 CMS",...}],"options":[],"files":[]}

Each company exists multiple times and it's about a 1000 rows.

That's my current setup: 

<html>
<select class="select-ajax form-control" placeholder="Entity Status" multiple="multiple"></select>
</html>

<script>
var company;

$(document).ready(function() {

$('.select-ajax').multiselect({
    maxHeight: 400,
    buttonWidth: '100%',
    includeSelectAllOption: true,
    enableFiltering: true
}); 

$.ajax({
  type: 'GET',
  url: '/data.php',
  dataType: 'json',
  success: function(data) {
     $.each(data, function (i, item) {
         company = item.company;
         $('.select-ajax').append('<option value="' + item.company + '">' + item.company + '</option>');
         console.log(item)
    });
    $('.select-ajax').multiselect('rebuild');
  },
  error: function() {
        alert('error loading items');
  }
 });

$('.select-ajax').trigger( 'change' );

}); 
</script>

The console.log() shows the following output: 

[Object { DT_RowId="row_1",  company="FirstCompany",  webtechnology:"Contao",  more...}, 
Object { DT_RowId="row_2",  company="SecondCompany",  webtechnology:"Wordpress",  more...}, 
Object { DT_RowId="row_3",  company="ThirdCompany",  webtechnology:"Custom",  more...}, 
Object { DT_RowId="row_4",  company="FourthCompany",  webtechnology:"TYPO3 CMS",  more...}, 46 more...]
Solution

  • The variable "data" have the complete ajax response {"data":[..........]}. we need to iterate the values in "data" key in the response. So need to put "data.data" which point to the actual JSON array in the response to populate the dropdown Inside success handler try changing

        $.each(data, function (i, item)
                 to
    $.each(data.data, function (i, item)

    To avoid duplicate entries you need to add a check before pushing data to dropdown. So finally the code inside success handler should look like the below.

    $.each(data.data, function (i, item) {
     company = item.company;
     if($(".select-ajax option[value='"+item.company+"']").length == 0){
        $('.select-ajax').append('<option value="' + item.company + '">' + item.company + '</option>');
     }
});

    Demo