Knockout JSを使用して入れ子になったjson配列の検索フィルタJS

Question

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; 
      } 
     }); 
     }); 

    } 
}); 

はしかし、私は結果をフィルタ処理されません。私が紛失しているものはありますか？

Answer 1

あなたのグループを維持してアイテムをフィルタリングしたいと思います。あなたの解では、arrayFilterは常にフィルタリングされた項目の配列を返します。しかし、どの配列（空であっても）を知っているかもしれませんが、trueと評価され、暗黙の型変換のためにフィルタリングされた項目が失われたため、は、すべてオリジナルグループオブジェクトすべて元項目を返します。

あなた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