Bootstrap Multiselect and $.ajax GET with nested objects

Question

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...]

Nofi · Accepted Answer · 2016-03-17T16:05:39.273

1

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

edited Mar 17 '16 at 16:05

answered Mar 02 '16 at 07:15

Nofi

2,107
1
15
23

That worked, thanks. Yet, I get all the records from the column not only the unique ones. How can I avoid dublicates in the dropdown? And, I have another multi select, where the option values (about 100) are in a 500000 row table. There I get a "NetworkError: 500 Internal Server Error" and the objects don't load. Is the file simply to big or how could I do this in that case? – Philipp M Mar 02 '16 at 10:15
I have updated my answer to avoid adding duplicates. Please check and mark it as answer on clicking the tick mark. – Nofi Mar 03 '16 at 04:50
Also Philipp, your second requirement on 500000 row table is not clear. Can you please elaborate. If you are getting "NetworkError: 500 Internal Server Error" then it should be back end server issue. But if you are trying to get 5000000 rows via single ajax, then definitely you need to change the logic to get max of 100 or 200 rows via single ajax call. – Nofi Mar 03 '16 at 04:53
Awesome. The duplicate solution works perfectly as well. In case of the 500000 rows, I now reduced the json in the backend by filtering only distincts into another table. So this now works too. I do have another wish though, based on the above solution of yours, how can I sort the options in the dropdown alphabetically? Without knowing if I'm on the right track, I was looking e.g. on that http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery – Philipp M Mar 10 '16 at 13:32
Any idea how to sort the select list alphabetically? – Philipp M Mar 17 '16 at 08:44
Please click the tick mark to accept my answer. It will be helpful for others who are facing same kind of issues in bootstrap-multiselect. – Nofi Mar 17 '16 at 10:39
I just did. Sorry for that. By any chance, could you help me with the alphabetically sorting as well? – Philipp M Mar 17 '16 at 13:03
first we need to sort the values in the variable "data" then we need to push it to the bootstrap multiselect – Nofi Mar 17 '16 at 15:29
Please check and let me know wether it is working or not? – Nofi Mar 17 '16 at 15:57
try this jsfiddle "https://jsfiddle.net/Nofiden/c901hfkc/7/" or click Demo link from my post – Nofi Mar 17 '16 at 16:06
It's working like a charm :-) ... thanks so much! Really appreciate! – Philipp M Mar 21 '16 at 08:53

Bootstrap Multiselect and $.ajax GET with nested objects

1 Answers1