I have developed a MapQuest API application that includes two input boxes - one for the "from" location and another for the "to" location for navigation. Currently, I have hardcoded the values for these locations in my app.component file, which retrieves the JSON data correctly. However, I am facing challenges in integrating these two distinct search boxes into my pipe using the current method. Below are the input boxes defined in the HTML:
<form >
<input #from id="from"
(keyup)="search(from.value)"/>
<input #to id="to"
(keyup)="search2(to.value)"/>
</form>
And here is the TypeScript code snippet:
export class AppComponent implements OnInit {
title = 'hw5-part1';
mapResult: any;
to: string = 'boston';
from: string = 'poughkeepsie';
private searchTerms: Subject<string>;
Any assistance on this matter would be greatly appreciated.
constructor(private mapQuestService: MapQuestService) { }
search(term: string): void {
this.searchTerms.next(term); }
ngOnInit() {
this.searchTerms = new Subject<string>();
this.searchTerms.pipe(
debounceTime(1000),
distinctUntilChanged(),
switchMap((x) => {
console.log('the term is ', x)
console.log(this.from, this.to);
return this.mapQuestService.getMap(this.from, this.to);
}))
.subscribe((result: any) => {
console.log(result);
this.mapResult = result.items;
console.log(result.route.legs[0].maneuvers);
});
}
}