JSONオブジェクト全体をフィルタリングする方法は？

Question

VueJS2とWordpress REST APIを使用してWordpress JSONデータオブジェクトをフィルタリングしようとしています（実際の例でカスタム投稿タイプがあります）。

postオブジェクトのtitleプロパティを使って正常にフィルタリングできますが、検索用語にはpost.titleプロパティではなく、全体の投稿オブジェクトをフィルタリングすることが可能かどうかは疑問でした。タイトルだけでなく、オブジェクト内の他の場所にも存在します。

JSFIDDLE here

HTML：

<div id="app" class="container" style="padding-top: 2em;">  
    <input v-model="searchText"> 

    <table class="table table-striped" v-if="posts"> 
    <thead> 
     <tr> 
     <th>Title</th> 
     <th>Product Type</th> 
     </tr> 
    </thead> 
    <tr v-for="post in itemsSearched"> 
     <td>{{post.title.rendered}}</td> 
     <td>{{post._embedded["wp:term"][1]["0"].name}}</td> 
    </tr> 
    </table> 
</div> 

JS：

var vm = new Vue({ 
    el: '#app', 
    data: { 
    message: 'hello world', 
    searchText: '', 
    posts: [] 
    }, 
    computed : { 
    itemsSearched : function(){ 
     var self = this; 
     if(this.searchText == ''){ 
     return this.posts; 
     } 
     return this.posts.filter(function(post){ 
     return post.title.rendered.indexOf(self.searchText) >= 0; 
     }); 
    } 
    }, 
    created: function(){ 
    $.get('https://wordpress-dosstx.c9users.io/wp-json/wp/v2/products/' + '?_embed=true') 
     .done(function(data) { 
     vm.posts = data; 
     }); 
    } 
}); 

誰でもクエリがオブジェクト全体を検索することができるようにコードを書く方法を知っていますか？ありがとうございました。

Answer 1

これらのオブジェクトは非常に豊富です。 すべてを検索したいとは思いません。

完全にナイーブこれを行う方法かもしれません。

return this.posts.filter(function(post){ 
    return JSON.stringify(post).includes(self.searchText) 
}); 

しかし、これは、キーに一致するテキストを返しますが、それは同様にすべてのサブオブジェクトを検索します。

もう1つの可能な方法は、文字列であるオブジェクトのプロパティのみを検索することです。

return this.posts.filter(function(post){ 
    return Object.keys(post).some(k => { 
    return typeof(post[k]) === "string" && post[k].includes(self.searchText) 
    }) 
}); 

しかし、それはポストの直接的な属性だけを検索し、サブオブジェクトは検索しません。

私はあなたのスコープを狭くしたいと思います。