How to loop through array inside an observable using async pipe?

Question

I am consuming an API which returns a response like this:

case:1
requests:[reqObj1,reqObj2,reqObj3]
count:3
message:"Found requests successfully."
pagesCount:1

The Service:

listRequest(sort, records, pageNumber, queries?): Observable<any> {
    const updateQueries = this.gtn.getHeaders() as RequestOptions;
    updateQueries.params = queries;
    return this.http
      .get(globals.domain + '/team/requests/list/sortBy-' + sort + '/' + records + '/' + pageNumber + '/', updateQueries)
      .map(res => {
        this.responseData = res.json();
        return this.responseData;
      });
  }

This will return an Observable with the response object as mentioned above, I will get this observable in the component and assign it to the local observable in the component.

Component:

this.requestResponse= this.rts.listRequest(sort, records, page, this.q);

I want to iterate over the array of request which is in the observable and i am using the async pipe in my html

HTML:

    <div class="request-items-inner" *ngFor="let request of requestResponse.requests | async">
{{request.createdAt}}
</div>

but this does not display anything on the screen. And if i use *ngFor="let request of requestResponse| async" it gives an error in the console.

Tomasz Kula · Accepted Answer · 2018-04-10 14:59:44Z

8

You need to unwrap the response with an 'async' pipe first, and then iterate over the requests array.

<div class="request-items-inner" *ngFor="let request of (requestResponse | async)?.requests">
  {{ request.createdAt }}
</div>

answered Apr 10, 2018 at 14:59

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

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

4 Comments

Talal Tahir Malik Over a year ago

Awesome, Thank You!

Tomasz Kula Over a year ago

Glad I could help :)

Talal Tahir Malik Over a year ago

By the way, lets say i have a loading component, how can i use that while waiting for the data?

Anil Kumar Over a year ago

How to check if the data is returned by the Observable or data is empty before looping or unwrapping the observable??

Collectives™ on Stack Overflow

How to loop through array inside an observable using async pipe?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related