Let me walk you through the code that is currently working:
<input [formControl]="search"
[typeahead]="suggestions"
typeaheadOptionField="name"
(typeaheadOnSelect)="onSelectedDriver($event)">
ngOnInit(){
public autocompleteValue() {
this.search.valueChanges.subscribe(
(selectedValue) => {
this.searchVal(selectedValue)
}
);
}
}
public searchVal(val: string) {
this.suggestions = (new Observable((observer: Observer<string>) => {
observer.next(val);
})).pipe(
switchMap((query: string) => {
if (query) {
switch (this.serverApi) {
case 'Driver':
return this.getAllDrivers(query);
default:
break;
}
}
return of([]);
})
);
}
In addition to this, here is another section of code:
getAllDrivers(query: string) {
return this.accountsService.getDrivers(query)
.pipe(
map((data: any) => {
data.body?.forEach((driver: IDriver) => {
driver.name = `${driver.firstName} ${driver.lastName}`
});
return data.body || [];
}),
tap(() => noop, err => {
this.errorMessage = err && err.message || 'Something goes wrong';
})
)
}
The current functionality is successful.
However, there is a need to extend the functionality further.
There is a requirement to merge two API calls into one and retrieve the combined result.
I attempted to do so without using typeahead with forkJoin..
this.search.valueChanges.subscribe(val => {
let driverLoad = this.service.searchDrivers(val, [{ name: 'name', value: val }]);
let affiliateLoad = this.service.searchAffiliates(val, [{ name: 'name', value: val }])
forkJoin([driverLoad, affiliateLoad, travelAgenciesLoad]).subscribe(resultsOfSearch => {
let driverArr = resultsOfSearch[0].body;
let affiliateArr = resultsOfSearch[1].body;
this.autoCompleteResults = [...driverArr as [], ...affiliateArr as []];
return this.autoCompleteResults
})
});
I am struggling to make this new piece of functionality work.
How can I effectively combine these operations and get the desired output?