Can we implement a search and filter functionality using forEach method? I have 4 dropdown lists and a submit button. For example, when one or two criteria are selected and the submit button is clicked, the results will be displayed in a dataTable.
For instance, selecting the value "ABC" will show all data containing the word "ABC". Is this possible?
Below is the HTML code used for filtering and searching:
<div class="nd_panel form_filter_home fixed" id="panel-filter-search-container">
<h6 class="accordion-toggle" href="#filters" (click)="toggleCollapse($event)">
<span class="glyphicon glyphicon-filter text-primary"></span>
<label>{{ 'search-filtre' | translate }}</label>
</h6>
...
...
...
</form>
</div>
The onSubmit function is used to handle the form submission and display filter results based on the selected criteria.
onSubmit(searchFormValue): void {
if (this.isValid(searchFormValue)) {
if (searchFormValue === searchFormValue.SelectedEntity) {
// do something to display filter results
}
}
}
In the following script, values displayed on the dropdown lists are initialized during component initialization:
ngOnInit(): void {
this._userService.getEntities().subscribe(
entities => {
this.entities = entities;
entities.forEach(entity => {
if (this.entityTypes.filter(tp => tp.value === entity.type).length === 0) {
this.entityTypes.push({ value: entity.type, label: entity.type });
this.displayedEntityTypes.push({ value: entity.type, label: entity.type });
}
if (this.entityProfiles.filter(tp => tp.value === entity.profil).length === 0) {
this.entityProfiles.push({ value: entity.profil, label: entity.profil });
this.displayedEntityProfiles.push({ value: entity.profil, label: entity.profil });
}
this.entityCodes.push({ value: entity.code, label: entity.code });
this.displayedEntityCodes.push({ value: entity.code, label: entity.code });
});
},
err => {
console.log(err);
}
);
}