How to display data from Observable in Angular component

Question

I have a problem with displaying Observable object in component.

My Json structure is:

{ 
  "data": [
    {
     "id": "123",
     "name": "test",
    } 
  ], 
  "pagination": null
}

So I have created interface to map this json to .ts

export interface Paginated<T>{
   data: Array<T>;
   pagination: Pagination;
}

In my component I have Observable object for this json:

 this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`);

And I do not have idea how to display property data which is inside Observable<Paginated> with using async pipe, because this json is not an array - it is object with two property - data and pagination so I cannot just simply use *ngFor with async pipe, because this object is not an array.

So my question is how to display in component this property data when I received Observable<Paginated> I cannot use *ngFor... how to unpack data property from this Observable<Paginated>

Fateh Mohamed · Accepted Answer · 2020-06-25 19:58:38Z

2

try this

response$: Observable<Paginated<Event>>;
constructor() {
  response$ = this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`);
}

and in your component

<li *ngFor="let dataEl of (response$ | async)?.data">{{dataEl.name}}</li>

answered Jun 25, 2020 at 19:58

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhruv Shah · Accepted Answer · 2020-06-25 20:00:51Z

1

In case when you want to extract the value out of an observable, you can subscribe to its value in the following way:

data: Array<T> = [];

constructor(){
   this.httpClient.get<Paginated<Event>>(`${environment.apiUrl}/events`).subscribe((response) => {

      // then extract the data from response over here
      const {data, pagination} = response;

      // assign the extracted 'data' array to a component variable named data.
      this.data = data;

   });
}

And in the html template you can then use

<li *ngFor="let el of (data)">{{data.name}}</li>

answered Jun 25, 2020 at 20:00

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to display data from Observable in Angular component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related