Bootstrap Multiselect和$ .ajax GET與嵌套對象

我正努力達到$ .ajax GET嵌套對象並動態地將數據發送到Bootstrap Multiselect下拉選擇選項。類似.. 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

更具體，我想多選擇對象「公司」從data.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>

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

來源

2016-03-01 Philipp M

變量「數據」有完整的Ajax響應{ 「數據」：[ ..........]}。我們需要迭代響應中「數據」鍵中的值。因此，需要把「data.data」來填充下拉這點在響應中的實際JSON數組內成功處理程序嘗試更改

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

Demo

來源

2016-03-02 07:15:14 Nofi

這工作，謝謝。但是，我從列中獲取所有記錄，不僅是唯一的記錄。我怎樣才能避免在下拉菜單中出現？而且，我還有另一個多選，其中選項值（大約100）在500000行表中。在那裏我得到一個「NetworkError：500內部服務器錯誤」，並且不加載對象。該文件是否只是很大，或者如何在這種情況下做到這一點？ –

我已更新我的答案，以避免添加重複項。請點擊勾號勾選並標記爲答案。 – Nofi

菲利普，你在500000排桌上的第二個要求還不清楚。你能否詳細說明一下。如果您收到「NetworkError：500 Internal Server Error」，那麼它應該是後端服務器問題。但是如果你試圖通過單個Ajax獲得5000000行，那麼你肯定需要改變邏輯來通過單個Ajax調用來獲得最多100或200行。 – Nofi

Bootstrap Multiselect和$ .ajax GET與嵌套對象

回答

相關問題