Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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<Client[]>  why are you returning Observable<Address> ?
– Ashish Ranjan
                Jan 8, 2019 at 3: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 8, 2019 at 3: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 8, 2019 at 3:29
                Change the return type of the method: getClients(customerId: number): Observable<Address>  {}, also probably the method name if it returns just address not full client.
– Ashish Ranjan
                Jan 8, 2019 at 3:31
                Otherwise, return the full client, getClients(customerId: number): Observable<Client> { ... return this.http.get<Client>(clientUrl) }. Take out the address where you subscribe. Getting the full client seems to be a better option
– Ashish Ranjan
                Jan 8, 2019 at 3:42
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.
                For those who are not familiar with rxjs lbrary (like me): use this import for map import { map } from 'rxjs/operators';
– pdem
                Mar 28, 2022 at 13:25
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[]>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.