Bootstrap Multiselect 和 $.ajax GET 与嵌套对象

Bootstrap Multiselect and $.ajax GET with nested objects

本文关键字：嵌套 对象 GET ajax Multiselect Bootstrap      更新时间：2023-09-26

我正在努力$ ajax GET嵌套对象并将数据动态发送到Bootstrap Multiselect下拉选择选项。似。。从 AJAX 调用返回的数据显示在引导多选下拉列表中的问题引导多选在 API 上不起作用 json 绑定在 ajax 调用 jquery 中

更具体地说，我想从数据中多选对象"公司".php（使用数据表编辑器）：

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

每个公司存在多次，大约有 1000 行。

这是我目前的设置： 

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

控制台.log（） 显示以下输出： 

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

变量"data"具有完整的ajax响应{"data"：[..........]}。我们需要迭代响应中"data"键中的值。所以需要在响应中放置指向实际JSON数组的"data.data"以填充下拉列表内部成功处理程序尝试更改

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

为避免重复条目，您需要在将数据推送到下拉列表之前添加检查。因此，最后成功处理程序中的代码应如下所示。

$.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>');
     }
});

演示

相关文章：