Currently, my webpage has a left and right section. The right section displays results based on the filters chosen by the user on the left. Upon selecting filters and clicking a button, a query is sent to the server to retrieve the relevant results.
I've started noticing that my if/else statements are becoming quite messy, particularly when adding new filters. Is there a more efficient way to handle this?
The current filters in use are:
foo, bar, fromdate, todate, profileHere is an example of my if/else structure:
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;
}
Question Is there a better approach to simplify and manage these if/else conditions?