使用 Knockout JS 搜索嵌套 json 数组的过滤器答案

【问题标题】：Search filter for nested json array using Knockout JS使用 Knockout JS 搜索嵌套 json 数组的过滤器
【发布时间】：2017-07-24 14:41:32
【问题描述】：

我正在尝试使用 Knockout js 过滤嵌套的 json 数组。这是我的 JSON 的样子

{
"groups": [{
    "name": "Category1",
    "items": [{
        "question": "Question1",
        "answer": "Answer1"
    }]
}, {
    "name": "Category2",
    "items": [{
        "question": "Question2",
        "answer": "Answer2"
    }, {
        "question": "Question3",
        "answer": "Answer3"
    }]
  }]
}

我需要根据“答案”进行过滤。这是我的 HTML 页面现在的样子

 <div >
<div class="groups" data-bind="{foreach: {data: filteredGroups, as: 'group'}}">
  <div class="name-row" data-bind="text: group.name"></div>
  <div class="items" data-bind="{foreach: {data: group.items, as: 'item'}}">
    <div class="item-row">
      <div class="question-row">
        <div class="question-content">
          <div class="letter">Question</div>
          <div data-bind="text: item.question"></div>
        </div>
        <div class="notch">&nbsp;</div>
      </div>
      <div class="answer-row">
        <div class="letter">Answer</div>
        <div data-bind="text: item.answer"></div>
      </div>
    </div>
  </div>
</div>

以下是我目前的逻辑：

 self.filteredGroups = ko.computed(function() {
  if (!self.query()) {
    return self.groups();
  }
  else {  

       var matchCount = 0;

      return ko.utils.arrayFilter(self.groups(), function(group) {
        return ko.utils.arrayFilter(group.items, function(item) { 
           //console.log("Entered==>" + self.query().toLowerCase() +  "  "  + "Search==>" + item.question.toLowerCase());
           var found = item.answer.toLowerCase().indexOf(self.query().toLowerCase());
           if(found >= 0){
             console.log("Number of occurrences" +matchCount++);
             return true;
           }else{
             return false;
           }
         });
      });

   }
});

但是，当我尝试执行相同操作时，我没有得到过滤结果。我有什么遗漏的吗？

【问题讨论】：

标签： javascript json knockout.js

【解决方案1】：

我猜你想过滤项目并保留它们的组。在您的解决方案中，内部 arrayFilter 将始终返回一个过滤项数组。但是您可能知道任何数组（即使是空的）总是会评估为 true 导致外部 arrayFilter 返回带有 all 原始项目的 all 原始组对象，因为由于隐式类型转换，过滤的项目丢失了。

让您的computed 工作的最简单方法：

self.filteredGroups = ko.computed(function() {
    if (!self.query()) {
        return self.groups();
    } else {

        var result = [];

        // for each group
        ko.utils.arrayForEach(self.groups(), function(group){

            // find items matching the query
            var items = ko.utils.arrayFilter(group.items, function(item){
                return item.answer.toLowerCase().indexOf(self.query()) >= 0;
            }); console.log(items);

            // if found something then push new group object with filtered items
            if (items.length > 0) result.push({
                name: group.name,
                items: items
            });

        });

        return result;
    }
});

fiddle

【讨论】：