How to pipe / map an Observable in Angular

Question

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[]>'.

When your return type is `Observable ` why are you returning `Observable
`? — Ashish Ranjan, Jan 08 '19 at 03:23
Also, casting like this is just fooling Typescript(and it is fine) but it wont actualy do any conversion in the returned data. — Ashish Ranjan, Jan 08 '19 at 03:24
@xyz that makes sense now that I read it again. I’ve been staring at it for too long. The main objective is to make client.address an Address so I can use it for interpolation. Any suggestions? — Tong, Jan 08 '19 at 03:29
Change the return type of the method: `getClients(customerId: number): Observable
{}`, also probably the method name if it returns just address not full client. — Ashish Ranjan, Jan 08 '19 at 03:31
Otherwise, return the full client, getClients(customerId: number): Observable { ... return this.http.get(clientUrl) }. Take out the address where you subscribe. **Getting the full client seems to be a better option** — Ashish Ranjan, Jan 08 '19 at 03:42

score 47 · Accepted Answer · answered Jan 08 '19 at 04:25

47

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.

answered Jan 08 '19 at 04:25

Dasha Ermolova

484
4
6

Thank you, this was what I was trying to do. – Tong Jan 08 '19 at 18:12
sir can you tell me how to handle if client.address) will be null? – Kapil Soni Oct 28 '21 at 05:46
3

For those who are not familiar with rxjs lbrary (like me): use this import for map `import { map } from 'rxjs/operators';` – pdem Mar 28 '22 at 13:25

score 2 · Answer 2 · edited Jan 02 '20 at 09:49

2

The problem is here:

getClients(customerId: number): Observable<Client[]> {

you requested the function to return in form of observable (array of client) but actually you are returning Observable of Address.

.pipe(map(client: Client) => client.address as Address);

That's why the function is throwing this error. Replace Observable<Client[]> with Observable<Address[]>

edited Jan 02 '20 at 09:49

Community

1
1

answered Jan 08 '19 at 04:06

Akshay Rajput

1,978
1
12
22

How to pipe / map an Observable in Angular

2 Answers2

Linked