How to make api url request with two search terms in angular/typescript

Question

I am making a mapquest api application. I have 2 input boxes, one for "from" and one for "to" for the navigation. With those values hardcoded in my app.component, it returns the json correctly. however, I have nooooo idea how to get those 2 distinct search boxes into my pipe using the method that I'm using. here are my input boxes in the html:

<form >
         <input #from id="from"
            (keyup)="search(from.value)"/>

            <input #to id="to"
            (keyup)="search2(to.value)"/>
  </form>

and here is my typescript:

export class AppComponent implements OnInit {
  title = 'hw5-part1';
  mapResult: any;
  to: string = 'boston';
  from: string = 'poughkeepsie';

  private searchTerms: Subject<string>;

any help would be super appreciable.
  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);
      });
    }
}

Nikhil · Accepted Answer · 2019-10-08 19:12:33Z

1

One approach would be to wrap the two values in an object while sending to switchMap().

this.searchTerms$.next({ "from": this.from, "to": this.to });

And modify switchMap() to use these two values.

searchTerms$.pipe(
  debounceTime(1000),
  distinctUntilChanged((p, q) => p.from === q.from && p.to === q.to),
  switchMap(input => {
    let from = input.from;
    let to = input.to;

    if (from && to) {
      return this.mapQuestService.getMap(from, to);
    } else {
      return of([]);
    }
  })
);

Live demo on StackBlitz: https://stackblitz.com/edit/angular-two-values-in-switch-map

edited Oct 8, 2019 at 19:12

answered Oct 8, 2019 at 19:06

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make api url request with two search terms in angular/typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related