Handling of Observable after Get request using Angular 13

Question

I am trying to do a get request to get data and then populate a <ul>. Currently the following code works and the data is displayed correctly but I am trying to use the async pipe as it will handle the subscribing and unsubscribing automatically (as far as I understand the topic):

  this.dataService.getAllCompetitions()
  .subscribe(competition=> 
    {
      this.competitions = competition;
    }); 

And then the template:

<div class="competitions-table">
   <ul *ngFor="let comp of competitions?.data">{{comp.name}}</ul>
</div>

Now when I try to implement the async pipe by removing the initial subscribe and assigning the observable to the this.competitions variable

this.competitions = this.dataService.getAllCompetitions();

And then I changed the template accordingly:

<div class="competitions-table">
    <ul *ngFor="let comp of competitions?.data | async">{{comp.name}}</ul>
</div>

No data is displayed in the template so I'm not quite sure where i went wrong or what I currently don't understand about the implementation.

Answer 1

Since the data is a part of the object returned from the getAllCompetitions's Observable`, then, you need to map it first before using it, like the following:

this.competitions = this.dataService
  .getAllCompetitions()
  .pipe(map((res) => res.data));

Then, you can use it in the component template like the following:

<div class="competitions-table">
  <ul *ngFor="let comp of competitions | async">{{ comp.name }}</ul>
</div>

---

OR, you can access data directly in the component template, like the following:

<div class="competitions-table">
  <ul *ngFor="let comp of (competitions | async)?.data">{{ comp.name }}</ul>
</div>