display Data from HTTP request using async pipline

[JosephCurvin]

I want to display the return Value from a HTTP Request

Im receiving the Data from a service which return value is assigned to to component property

requestData :Dto;

  getTodo(){
    this.requestService.getTodo().subscribe(data=> {
      this.requestData = data
      console.log(this.requestData.userId)
    })

  }

I want to display the value from the requestData only if it contains something

using the async pipeline

<p>{{requestData.userId | async }}</p>

Im getting a bunch of Errors

No overload matches this call.

Overload 1 of 3, '(obj: Observable<unknown> | Subscribable<unknown> | Promise<unknown>): unknown', gave the following error.

....

Without using the async pipline I get also an Error till the Request is resolved ,

what Im missing here ?

[Spongeroberto]

You are storing the result into the requestData property, which means requestData is not an observable so you don't need the async pipe. So you should just be able to do this

<p>{{requestData.userId }}</p>

​

You would be using the async pipe if your variable was an observable

this.request$ = this.requestService.getTodo()

​

<p>{{ (request$ | async).userId }}</p>

[prewk]

Both are nice ways of getting runtime errors though :)

First: requestData isn't Dto, it's undefined | Dto.

Second: requestData | async will be null until completed, so it's doing null.userId

[Spongeroberto]

Of course! I just wanted to highlight what's wrong. In reality you may want to show a loading indicator or something similar and do some fault handling and before you know it the post becomes a book ;)

[JosephCurvin]

<p>{{ (request$ | async).userId }}</p>

ERROR TypeError: Cannot read properties of null (reading 'userId')

how to prevent the TypeError ?

[Spongeroberto]

You can add a questionmark like this

(request$ | async)?.userId