結果セットをフィルタリングする際に複数のif/elseを避ける方法

Question

私は左右のセクションを持つページを持っています。右側のセクションには、ユーザーが左側で選択したフィルターに基づく結果が表示されます。ユーザーが左側のフィルターを選択してボタンを押すたびに、サーバーに照会して結果を取得します。

私はif/else節がひどいように見えます。新しいフィルタを追加するたびに、多くの作業が必要になります。これを避ける方法はありますか？現時点で

私は、次のフィルタがあります/他は次のように見える場合foo, bar, fromdate, todate, profile

私を：

var query = "?" 
if (self.foo === '' && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '') 
    query = ""; 
else if (self.foo.length > 2 && self.bar === '' && self.fromdate === '' && self.todate === '' && self.profile === '') 
    query += "foo=" + self.foo; 
else if (self.foo.length > 2 && self.bar.length > 2 && self.fromdate === '' && self.todate === '' && self.profile === '') 
    query += "foo=" + self.foo + "&bar=" + self.bar; 

// ... 

xhr.open('GET', apiURL+query) 
self.loading = true 
xhr.onload = function() { 
    self.requests = JSON.parse(xhr.responseText) 
    //do stuff 
    self.loading = false; 
} 

質問 /他のより簡単に理解することがあれば、これを作るための方法はあります管理していますか？

Answer 1

私は道

var query = '?'; 
query += self.foo.length > 2 ? '&foo=' + self.foo : ''; 
query += self.bar.length > 2 ? '&bar=' + self.bar : ''; 
query += self.fromdate ? '&fromdate=' + self.fromdate : ''; 
query += self.todate ? '&todate=' + self.todate : ''; 
query += self.profile ? '&profile=' + self.profile : ''; 

とオブジェクト

var self = { 
    foo: "hello", 
    bar: "w", 
    profile: "me" 
} 

のためにあなたが?&foo=hello&profile=meとして結果queryを取得するには、それを行うだろう。初めに?&を組み合わせてもリクエストには影響しないため、先頭の&を削除する必要はありません。あなただけqueryParams配列にロジックを触れる必要を更新していないキーを追加したい場合は、私は

var queryParams = [ 
     'foo', 
     'bar', 
     'profile', 
     etc... 
    ] 
    var query = ''; 
    queryParams 
     .forEach(key => query = self[key].length > 2 ? 
      query + `&${key}=${self[key]}` : query); 
    query = query.length ? '?' + query : query; 

を提案している何

Answer 2

。

Answer 3

多分この例があなたを鼓舞します。私はそれが単純で宣言的で柔軟な解決策であることを願っています.HTMLテンプレートのparamsモデルに何個の入力をバインドしても、jsコードは変更されません。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    params: {} 
 
    }, 
 
    computed: { 
 
    query() { 
 
     var query = [] 
 
     for (param in this.params) 
 
     if (this.params[param].length > 2) 
 
      query.push(param + '=' + this.params[param]) 
 
     query.length 
 
     ? query = '?' + query.toString().replace(/,/g, '&') 
 
     : query = '' 
 
     return query 
 
    } 
 
    }, 
 
    methods: { 
 
    submit() { 
 
     console.log('my.url' + this.query) 
 
    } 
 
    } 
 
})

<div id="app"> 
 
    <input type="text" v-model="params.foo"> 
 
    <input type="text" v-model="params.bar"> 
 
    <input type="text" v-model="params.baz"> 
 
    <button @click="submit">Submit</button> 
 
</div> 
 

 
<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>