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

Posted

技术标签:

【中文标题】如何使用基于 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 "> 

【讨论】:

以上是关于如何使用基于 JSON 的下拉菜单来过滤 xml 源?的主要内容,如果未能解决你的问题,请参考以下文章

Plotly:如何使用下拉菜单过滤熊猫数据框?

基于 HTML 5 Geo Location 按表单选择下拉列表过滤结果

如何根据 JSON 数据和过滤参数过滤列表视图?

如何根据我的代码和 JSON 响应对象显示下拉菜单列表?

过滤的下拉菜单

Drupal 视图和暴露的过滤器下拉菜单