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-17 16:05:39Z

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, 2016 at 16:05

answered Mar 2, 2016 at 7:15

Nofi

2,1952 gold badges17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Philipp M Over a year ago

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?

Nofi Over a year ago

I have updated my answer to avoid adding duplicates. Please check and mark it as answer on clicking the tick mark.

Nofi Over a year ago

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.

Philipp M Over a year ago

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 stackoverflow.com/questions/12073270/…

Philipp M Over a year ago

Any idea how to sort the select list alphabetically?

|

Collectives™ on Stack Overflow

Bootstrap Multiselect and $.ajax GET with nested objects

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related