在挖空过滤嵌套数组

Question

我有场景，我需要根据用户输入过滤数组。以下是我的json。

[ 
    { 
    "storename": "store 1", 
    "license": "12314", 
    "books": [ 
     "abc", 
     "def", 
     "cdf" 
    ] 
    }, 
    { 
    "storename": "store 2", 
    "license": "12344", 
    "books": [ 
     "dfd", 
     "eww" 
    ] 
    }, 
    { 
    "storename": "store 3", 
    "license": "12344", 
    "books": [ 

    ] 
    } 
] 

我想过滤嵌套的数组，STORENAME和许可的项目应始终被退回，但书籍阵列将根据用户的输入返回。

我尝试过使用ko.utils.arrayFilter，但没有运气。例如，如果用户搜索书abc输出应该是。

[ 
    { 
    "storename": "store 1", 
    "license": "12314", 
    "books": [ 
     "abc" 
    ] 
    }, 
    { 
    "storename": "store 2", 
    "license": "12344", 
    "books": [ 
    ] 
    }, 
    { 
    "storename": "store 3", 
    "license": "12344", 
    "books": [ 

    ] 
    } 
] 

Answer 1

尽管原始数组不包含任何淘汰赛：

var data = [ 
 
    { 
 
    "storename": "store 1", 
 
    "license": "12314", 
 
    "books": [ 
 
     "abc", 
 
     "def", 
 
     "cdf" 
 
    ] 
 
    }, 
 
    { 
 
    "storename": "store 2", 
 
    "license": "12344", 
 
    "books": [ 
 
     "dfd", 
 
     "eww" 
 
    ] 
 
    }, 
 
    { 
 
    "storename": "store 3", 
 
    "license": "12344", 
 
    "books": [ 
 

 
    ] 
 
    } 
 
]; 
 

 
function ViewModel(data) { 
 
    var self = this; 
 
    self.filter = ko.observable("a"); 
 
    self.items = ko.computed(function() { 
 
    return data.filter(function(item) { 
 
     return ko.unwrap(item.books).some(function(book) { return book.indexOf(self.filter()) !== -1; }); 
 
    }); 
 
    }); 
 
} 
 

 
ko.applyBindings(new ViewModel(data));

.store-item { 
 
    border: 1px solid gray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<span>Filter text: </span><input data-bind="value: filter, valueUpdate: 'keyup'" /> 
 
<div>Search results:</div> 
 
<!-- ko foreach: items --> 
 
<div class="store-item"> 
 
<span>Store name: </span><span data-bind="text: storename"></span> 
 
<br> 
 
<span>License: </span><span data-bind="text: license"></span> 
 
<br> 
 
<!-- ko foreach: books --> 
 
<span>Book: </span><span data-bind="text: $data"></span> 
 
<br> 
 
<!-- /ko --> 
 
</div> 
 
<!-- /ko -->