Как правильно сделать поиск на rxjs?

Question

[Ланселот]

Здравствуйте. А не подскажите, можно ли как-то упростить поток который вызывает поиск на rxjs? Api может возвращеть null если не нашло записи. Спасибо.

export interface Organization {
  code: string,
  manager: string,
  fullName: string,
  name: string,
  address: string,
  activity: string,
  status: string
}

private subscription = new Subscription();

  constructor(private ufopService: UfopService) {
    this.subscription.add(
      this.searchText$.pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap((code: string) => iif(
          () => code.length === MIN_SEARCH_LENGTH,
          this.ufopService.getOrganization(code).pipe(
            switchMap((value: Organization | null) => iif(
              () => value === null,
              of(''),
              of(value).pipe(
                pluck('fullName')
              ))
            )
          ),
          of(''))
        )
      ).subscribe(fullName => this.fullName = fullName)
    )
  }

  onKeyPress(event: Event) {
    const { value } = (event.target as HTMLInputElement);
    this.searchText$.next(value)
  }

Answer 1

[Антон Швец]

fullName$ = formControl.valueChanges.pipe(
  switchMap((value: string) => this.ufopService.getOrganization(value)),
  map((organization:  Organization | null) => organization?.fullName ??  '')
)

внутри getOrganization проверять на вашу длину.

Comments

[Ланселот]

спасибо. а как должна выглядить проверка внутри getOrganization? И еще debounce куда вставить?

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

export interface Organization {
  code: string,
  manager: string,
  fullName: string,
  name: string,
  address: string,
  activity: string,
  status: string
}

@Injectable({
  providedIn: 'root'
})
export class UfopService {
  private baseUrl = 'http://авава';
  private token = 'вавв';

  constructor(private http: HttpClient) {}

  getOrganization(code: string) {
    // const code = '23788893';
    const headers = new HttpHeaders({ Token: this.token })
   return this.http.get<Organization | null>(`${this.baseUrl}/organizations/${code}`, { headers }).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse): Observable<never> {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return throwError('Something bad happened; please try again later.');
  }
}

[Антон Швец]

Ланселот, debounceTime(500) в начало цепочки, сразу после формы

в getOrganization проверку что code полезный, если нет, то возврат of(null)
Можно в обертку вынести, а не в самом апи сервисе делать.