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

Question

我正在设置一个网页，该网页当前使用 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 }">