Как использовать раскрывающийся список на основе JSON для фильтрации источника XML?

Question

Я настраиваю веб-страницу, которая в настоящее время извлекает данные из источника xml, используя Ajax.То, что я сейчас пытаюсь сделать, это отфильтровать этот выбор с помощью 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 }">