How to pipe / map an Observable in Angular

Tong

A nested object is showing up as [object Object] so I'm trying to cast it via pipe and map but I'm not getting any where. I've tried the models as classes and interfaces but no help. Can someone tell me what I'm doing wrong? Thanks.

The function:

  getClients(customerId: number): Observable<Client[]> {
    let clientUrl = 'SOME_URL';
    return this.http.get<Client[]>(clientUrl)
      .pipe(map(client: Client) => client.address as Address);
  }

The models:

import { Address } from './address.model';

export class Client{
  id: number;
  name: string;
  accountNumber: string;
  addressId: number;
  phoneNumber: string;
  address: Address;
}


export class Address{
  id: number;
  name: string;
  addressLine1: string;
  addressLine2: string;
  city: string;
  postalCode: string;
}

I'm getting the error: Error TS2345 (TS) Argument of type 'Address' is not assignable to parameter of type 'OperatorFunction<{}, Client[]>'.

Dasha Ermolova

1) remove the piping part from your getClients() method

2) do the pipe-map before subscribing to getClients() or create another method, that will do only the piping part with the observable returned from getClients()

mapToAddress(): Observable<Address[]> {
  this.getClients.pipe(
    map((clients: Client[]) => clients.map(client => client.address))
  )
}

This is important to understand: when you call .map() method inside .pipe(), you're not getting a single client in this case, you get the whole clients array, pushed to Observable. Because you map the values, that are stored in the Observable - the values of type: < Client[] >.

Your pipe-map would work on some Observable, that emits a single client of type < Client >, not an array.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Pipe Observable subscription with map angular

How to async pipe an observable in Angular

How to return observable in observable map in Angular

Angular, observable pipe limit?

How could a map make an observable in angular

How to map strings to Observable<boolean> values in angular

Angular testing - observable pipe is not a function

Angular observable pipe return array

How to map Angular 5 observable to a different format using map()

Chain calls of Observable not working with pipe, map

Angular Observable map system

How to catchError on Observable's pipe?

How to test map and tap pipe from RXJS in Angular

How do I pipe/map to return an array in Angular 7

How can I pass an observable array of type Map<number, Employee> using the async pipe?

Angular 2 Usage of Http Observable and Pipe

Angular 8 : observable.pipe() not working anymore?

Angular template binding with Observable async pipe issue

Using Angular Async Pipe to Subscribe to Observable

Observable not subscribing when using pipe in Rxjs - Angular

*ngIf async pipe angular merge with another observable

Observable request inside Angular pipe for HTML filtering

Transform pipe in Angular 6 with Observable or Promise

need help on angular 7 Observable async pipe

Angular2 async pipe with observable

Angular Async Pipe - Array in Object in Observable

Angular2: How to add .map() to Observable API object?

Angular & Rxjs: How to map json to object array in a function returning Observable

How do I handle an observable with the async pipe in a textbox value for Angular 6?