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

时间:2016-03-01 21:21:53

标签: javascript jquery ajax datatables bootstrap-multiselect

我正在努力获取$ .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(使用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":[]}

每家公司都存在多次,大概有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...]

1 个答案:

答案 0 :(得分:1)

变量&#34;数据&#34;有完整的ajax响应{&#34;数据&#34;:[..........]}。 我们需要迭代&#34;数据&#34;关键在于回应。所以需要把&#34; data.data&#34;它指向响应中的实际JSON数组以填充下拉列表 内部成功处理程序尝试更改

TARGET=MeCab
JAVAC=javac
JAVA=java
JAR=jar
CXX=c++
INCLUDE=$(shell echo `/usr/libexec/java_home`/include)

PACKAGE=org/chasen/mecab

LIBS=`mecab-config --libs`
INC=`mecab-config --cflags` -I$(INCLUDE) -I$(INCLUDE)/darwin

all:
    $(CXX) -O3 -c -fpic $(TARGET)_wrap.cxx  $(INC)
    $(CXX) -dynamiclib  $(TARGET)_wrap.o -o lib$(TARGET)Jni.dylib $(LIBS)
    $(JAVAC) $(PACKAGE)/*.java
    $(JAVAC) test.java
    $(JAR) cfv $(TARGET).jar $(PACKAGE)/*.class

test:
    env DYLD_FALLBACK_LIBRARY_PATH=. $(JAVA) test

clean:
    rm -fr *.jar *.o *.so *.class $(PACKAGE)/*.class

cleanall:
    rm -fr $(TARGET).java *.cxx

为避免重复输入,您需要在将数据推送到下拉列表之前添加检查。所以最终成功处理程序中的代码应该如下所示。

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

Demo