Angular 4 HttpClientModule and map() function

Question

I am facing an issue in regard to new HttpClientModule and the map() function from RX.js.

What I want to do is to change the objects of the returned array inside the observable coming from the get() method.

My curent code:

get(url: string): Observable < any > {
  return this.http.get(this.config.baseUrl + url);
}


playerSearch(text: string): Observable < any[] > {
  if (text == "" || !text) {
    return Observable.of([]);
  } else {
    return this.auth.get(`/players?$expand=Contact($expand=Blob)&$filter=contains(Contact/LastName, '${text}') or contains(Contact/FirstName, '${text}')`).map((x) => {
      return {
        Id: x.Id,
        Name: x.Contact.FirstName + " " + x.Contact.FatherName.substring(0, 2) + ". " + x.Contact.LastName,
        BlobSrc: this.utilitiesService.imageLinkCreator(x)
      }
    });
  }
}

search = (text$: Observable < string > ) =>
  text$
  .debounceTime(300)
  .distinctUntilChanged()
  .do(() => this.searching = true)
  .switchMap(term =>
    this.dataService.playerSearch(term)
    .do(() => this.searchFailed = false)
    .catch(() => {
      this.searchFailed = true;
      return Observable.of([]);
    }))
  .do(() => this.searching = false);

The error that I get:

Type 'Observable<{ Id: any; Name: string; BlobSrc: string; }>' is not assignable to type 'Observable'.

Type '{ Id: any; Name: string; BlobSrc: string; }' is not assignable to type 'any[]'.

As far as I know, the map() method returns an observable with value only one object instead of an array.

What is the correct syntax in order to return an observable containing an Array of { Id: any; Name: string; BlobSrc: string; } objects?

Actually map doesn't have anything to do with arrays/not arrays, it only takes an Observable<T> and a function T => S and returns an Observable<S> — Amit
In this case you marked your return value as Observable<any[]> which is first of all an array, but you map your data into an object. — Amit

Amit Amit · Accepted Answer · 2017-08-30T09:00:53

If your http request returns an array of players, then this is how your code should look like:

get(url: string): Observable<any[]> {
        return this.http.get(this.config.baseUrl + url);
    }


playerSearch(text: string): Observable<any[]> {
    if (text == "" || !text) {
        return Observable.of([]);
    } else {
        return this.auth.get(`/players?$expand=Contact($expand=Blob)&$filter=contains(Contact/LastName, '${text}') or contains(Contact/FirstName, '${text}')`).map((arr: any[]) => {
            return arr.map(x => ({
                Id: x.Id,
                Name: x.Contact.FirstName + " " + x.Contact.FatherName.substring(0, 2) + ". " + x.Contact.LastName,
                BlobSrc: this.utilitiesService.imageLinkCreator(x)
            });
        });
    }
}

Angular 4 HttpClientModule and map() function

2 Answers