How to get rid of nested subscription when searching for names?

May 11, 2023

I wrote component that looks for github users by login. However this component has nested subscribe blocks. Please help me rewrite this component, using rxjs-operator that dont use nested subscribe blocks.

Here is the live example

My humble attempt to solve the problem is in the same place (see commented code).

Here is a basic concept:

fromEvent(this.userSearchInput.nativeElement, 'keyup')
  .pipe(
    map((event: any) => event.target.value),
    filter((res: string) => res.trim().length > 2),
    debounceTime(1000),
    distinctUntilChanged()
  )
  .subscribe((text: string) => {
    this.isSearching = true;

    this.httpClient
      .get('https://api.github.com/search/users?q=' + text)
      .subscribe(
        (res) => {
          console.log('res', res);
          this.isSearching = false;
          this.apiResponse = res;
        },
        (err) => {
          this.isSearching = false;
          console.log('error', err.error.errors, err.error.message);
        }
      );
  });

>Solution :

Its fairly easy, just switchMap from key event to http call and have it as single pipeline

fromEvent(this.userSearchInput.nativeElement, 'keyup')
  .pipe(
    map((event: any) => event.target.value),
    filter((res: string) => res.trim().length > 2),
    debounceTime(1000),
    distinctUntilChanged(),
    switchMap(text=>{
      this.isSearching = true;  
      return this.httpClient.get('https://api.github.com/search/users?q=' + text)
    })
  ).subscribe(res=> {
    console.log('res', res);
    this.isSearching = false;
    this.apiResponse = res;
  },
  (err) => {
    this.isSearching = false;
    console.log('error', err.error.errors, err.error.message);
  }
);

As a bonus, http requests are aborted when they are commencing and search term changes in the meantime

https://stackblitz.com/edit/reactive-dumb-components-mkvbbw?file=src%2Fapp%2Fapp.component.ts