Bootstrap Multiselect and $.ajax GET with nested objects
<p>I'm struggling to $.ajax GET nested objects and dynamically send the data to Bootstrap Multiselect dropdown select options. Similar to ..
<a href="https://stackoverflow.com/questions/28838071/issue-with-data-returning-from-ajax-call-showing-up-in-bootstrap-multiselect-dro">Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown</a>
<a href="https://stackoverflow.com/questions/34987559/bootstrap-multiselect-not-working-on-api-json-bind-in-ajax-call-in-jquery?rq=1">bootstrap multiselect not working on api json bind in Ajax call in jquery</a></p>

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

<pre><code>{"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":[]}
</code></pre>

<p>Each company exists multiple times and it's about a 1000 rows. </p>

<p>That's my current setup: </p>

<pre><code>&lt;html&gt;
&lt;select class="select-ajax form-control" placeholder="Entity Status" multiple="multiple"&gt;&lt;/select&gt;
&lt;/html&gt;

&lt;script&gt;
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('&lt;option value="' + item.company + '"&gt;' + item.company + '&lt;/option&gt;');
         console.log(item)
    });
    $('.select-ajax').multiselect('rebuild');
  },
  error: function() {
        alert('error loading items');
  }
 });

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

}); 
&lt;/script&gt;
</code></pre>

<p>The console.log() shows the following output: </p>

<pre><code>[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...]
</code></pre>