Filter by properties of nested array - Knockout
<p>I have some problems filtering a nested array with Knockout out.</p>

<p>I want to be able to filter the array by 'tag-names' as well as 'name'.</p>

<p>i.e. type in 'whal' and all object that contain a tag with that name is filtered in grid.</p>

<p>Fiddle: <a href="https://jsfiddle.net/king_s/fj9L3wjz/3/" rel="nofollow">https://jsfiddle.net/king_s/fj9L3wjz/3/</a></p>

<pre class="lang-html prettyprint-override"><code>&lt;input data-bind="value: searchQuery, valueUpdate: 'afterkeydown'" /&gt;

&lt;div data-bind="foreach: filter" class="grid"&gt;
    &lt;p data-bind="text: name"&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>(function(){
    var ViewModel = function() {
        var self = this;
        var obj = { "id": 11, 
            "name": "mouse", 
            "tags": [{ "id": 1, 
                "name": "critter"
            }] 
        };
        var obj2 = { "id": 12, 
            "name": "dolphin", 
            "tags": [{ "id": 2,
                "name": "fish"
            }, 
            {"id": 3,
                "name": "whale"
            }] 
        };
        self.searchQuery = ko.observable("");
        self.array = ko.observableArray([obj, obj2]);
        self.filter = ko.computed(function() {
            if(!self.searchQuery()) {
                return self.array();
            } else {
                return ko.utils.arrayFilter(self.array(), function(obj) {
                    return obj.name.toLowerCase().indexOf(self.searchQuery().toLowerCase()) &gt; -1;
                });
            }
        });
    };
    ko.applyBindings(new ViewModel());
})();
</code></pre>