In my Angular app, I have a set of checkbox filters that trigger API queries to fetch filtered results when clicked by the user. Currently, each filter works independently, but I'm struggling to create a function that can store ALL selected filters at once. The function utilizes a Mongoose/MongoDB feature to pass field-specific key/value pairs in the payload of a post request.
My existing code handles one filter at a time using if/else statements. For example, if the type is "lan", it assigns the corresponding value. If no value is given (all filters are deselected), an API call is made without any parameters:
onFilterReceived(value, type) {
if (type === 'lan' && value) {
this.filtersService.getByFilter(this.page, this.pagesize, {
"services.workflow.status" : "consulting",
"languages.primary" : { $in: value }
});
} else if (type === 'zip' && value) {
this.filtersService.getByFilter(this.page, this.pagesize, {
"services.workflow.status" : "consulting",
"zipCode" : { $in: value }
});
} else {
this.filtersService.getByFilter(this.page, this.pagesize, {
"services.workflow.status" : "consulting"
});
}
The values and types are passed through Angular's Output() and EventEmitter() like this:
<list [records]="records"
(sendLanguage)="onFilterReceived($event, type = 'lan')"
(sendZipcode)="onFilterReceived($event, type = 'zip')">
</list>
While this setup functions as intended, my goal is to modify it so that multiple filter values can be sent simultaneously over the API. When the received value corresponds to "lan", I want it applied to "languages.primary", and for "zip", to "zipCode". This way, I can include values from all active filters in the request.
I've experimented with different approaches, including if/else statements, but haven't achieved the desired outcome yet. If anyone could provide a simple example or guidance on how to structure this logic effectively, I would greatly appreciate it.