Wie zu vermeiden, wenn if/else beim Filtern von Resultsets

Question

Ich habe eine Seite, die linken und rechten Abschnitt hat. Im rechten Bereich werden die Ergebnisse basierend auf den Filtern angezeigt, die der Benutzer links auswählt. Jedes Mal, wenn der Benutzer die Filter auf der linken Seite auswählt und eine Taste drückt, mache ich eine Abfrage an den Server, um die Ergebnisse zu erhalten.

Ich merke, dass meine if/else-Klausel schrecklich aussieht und jedes Mal, wenn ich einen neuen Filter hinzufüge, muss ich viel Arbeit machen. Gibt es eine Möglichkeit, dies zu vermeiden?

Im Moment habe ich die folgenden Filter: foo, bar, fromdate, todate, profile

Meine if/else wie folgt aussieht:

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

Frage Gibt es eine Möglichkeit, dies zu machen, wenn/sonst leichter zu verstehen und verwalten?

Answer 1

Ich würde es auf eine Weise tun

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 : ''; 

Und für Objekt

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

Sie das Ergebnis query als ?&foo=hello&profile=me bekommen. Die Kombination von ?& am Anfang hat keine Auswirkungen auf die Anforderung, Sie müssen also die führende & nicht entfernen.

Answer 2

Was ich

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; 

vorschlagen Wenn Sie Schlüssel hinzufügen möchten nur queryParams aktualisieren Array keine Notwendigkeit, die Logik zu berühren.

Answer 3

Vielleicht wird dieses Beispiel Sie begeistern. Ich hoffe, es ist einfach, deklarative und flexible Lösung - egal wie viele Eingaben Sie an Params-Modell in HTML-Vorlage binden, bleibt Js-Code unverändert.

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>