In my Angular 2 application, I have successfully implemented an input with autocomplete that calls an API for server-side filtering and value retrieval. However, I am now facing a challenge as I need to add more inputs to my page that do not require server-side filtering. It would be more efficient to retrieve all values when the component loads and then perform filtering within the component itself.
To achieve this, I have an API call that returns three string arrays which I need to access in my Angular service using the standard method:
getFormFilters(): Observable<FormFilterModel> {
return this._http.get(this.baseUrl+this.getFormFiltersPath)
.map(res => res.json() as FormFilterModel);
}
The FormFilterModel interface includes three arrays: array1, array2, and array3.
While I have successfully retrieved the observable containing these arrays, I am struggling to filter them locally. My form inputs are connected to form controls similar to the server-side filtering input, but I cannot figure out how to access and filter the actual arrays within the Observable. Here is where I'm currently stuck with the code:
this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.switchMap(term => //need help with filtering FormFilterModel$ to return a subset of array1 based on input)
Although I can effectively filter an array using RegExp, accessing the array within the Observable seems to elude me at the moment.