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

Posted 2023-03-27

【中文标题】如何使用基于 JSON 的下拉菜单来过滤 xml 源？

【英文标题】：How can I use a JSON based drop-down to filter an xml source?

【发布时间】：2019-08-24 17:08:24

【问题描述】：

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


);

【参考方案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 ">