Question

我正在设置一个Web页面，当前使用Ajax从xml源提取数据。我现在试图做的是使用JSON筛选此选择。我已经能够建立一个包含相关选择的下拉列表，我的问题是如何将其应用于数据集。

我对JSON还是很陌生，所以很抱歉，已经回答了这个问题，但是我似乎找不到找到已经解决的相关问题。

到目前为止，我的下拉列表是：

            <p>
                Filter Name:
            <select data-bind="options: filters, value: filter"></select>
            </p>

我桌子的主体

            <tbody data-bind="foreach: { data:records, afterRender:highlight }">            
                <tr class="table-row" data-bind="click: $root.selectThing ">
                    <td data-bind="text: data"></td>
                    <td data-bind="text: data"></td>
                    <td data-bind="text: data"></td>
                </tr>            
            </tbody>

下面是我的JSON脚本，我已经设置了过滤器，但是在尝试将过滤器名称应用于变量“ dataFromServer”时迷路了。

任何对此的反馈将不胜感激。


$(document).ready(function() {

    var json;

    function typeModel() {

        var self = this;

        self.records = ko.observableArray();
        self.CurrentDisplayThing = ko.observableArray();

        self.filters = ko.observableArray(['Filter1', 'Filter2']);
        self.filter = ko.observable(['']); 

        self.selectThing = function(item) {

                                            self.CurrentDisplayThing.removeAll();
                                            self.CurrentDisplayThing.push(item);
                                            self.filteredItems = ko.computed(function() {
                                                var filter = self.filter();
                                                      if (!filter || filter == "None") {
                                                        return self.records();
                                                      } else {
                                                        return ko.utils.arrayFilter(self.records(), function(i) {
                                                          return i.Type == filter;
                                                        });
                                                      }
                                                    });
        };

       $.ajax({
        type: "GET" ,
        url: "xml/aag_sd.xml" ,
        dataType: "xml" ,
        success: function(xml) {

            json = xml2json($(xml)[0],"");

             var dataFromServer = ko.utils.parseJson(json);
            // self.records(dataFromServer.AAG.AtAGlance);
            self.CurrentDisplayThing.removeAll();
            self.CurrentDisplayThing.push((self.records()[0]));
            self.filteredItems = ko.computed(function() {
            var filter = self.filter();
              if (!filter || filter == "None") {
                return self.records();
               } else {
               return ko.utils.arrayFilter(
                  self.records(dataFromServer.AAG.AtAGlance), 
                         function(i) {
                          return i.Type == filter;
                        });
                      }
                    });
}

    });


    }
    ko.applyBindings(new typeModel());


});

Answer 1

我在错误的部分中具有以下功能：

        self.filteredItems = ko.computed(function() {
            var filter = self.filter();
                  if (!filter || filter == "None") {
                    return self.records();
                  } else {
                    return ko.utils.arrayFilter(self.records(), function(i) {
                      return i.type == filter;
                    });
                  }
                });

结果代码如下：

    function wardModel() {

        var self = this;

        self.records = ko.observableArray();
        self.CurrentDisplayThing = ko.observableArray();

        self.filters = ko.observableArray(['Filter1', 'Filter2']);
        self.filter = ko.observable(['']); 

        self.filteredItems = ko.computed(function() {
            var filter = self.filter();
                  if (!filter || filter == "None") {
                    return self.records();
                  } else {
                    return ko.utils.arrayFilter(self.records(), function(i) {
                      return i.type == filter;
                    });
                  }
                });

        self.selectThing = function(item) {

                                            self.CurrentDisplayThing.removeAll();
                                            self.CurrentDisplayThing.push(item);

        };

       $.ajax({
        type: "GET" ,
        url: "xml/aag_sd.xml" ,
        dataType: "xml" ,
        success: function(xml) {

            json = xml2json($(xml)[0],"");

             var dataFromServer = ko.utils.parseJson(json);
            self.records(dataFromServer.AAG.AtAGlance);
            self.CurrentDisplayThing.removeAll();
            self.CurrentDisplayThing.push((self.records()[0]));

然后...

<tbody data-bind="foreach: { data:filteredItems, afterRender:highlight }">

如何使用基于JSON的下拉列表来过滤xml源？

1 个答案: