Angular 2 nested observable loop

Question

I have two observable working against http api.
One is asking for places, the second for events.

The one which asks for events returns a hash of:

place_id => events_arr

and my code shows

<ng-container *ngFor="let place of placesData">
  <ion-item>
    <h1>{{place.name}}</h1>

      <ion-slides>
        <ng-container *ngFor="let event of eventsData[place.id]">
          <ion-slide>
            <h1>{{event.title}}</h1>
          </ion-slide>
        </ng-container>
      </ion-slides>
  </ion-item>
</ng-container>

My problem is that placesData observable is faster than eventsData , so eventsData[place.id] raises the following exception:

TypeError: Cannot read property '12' of undefined

Any idea?

quick little hack <ion-slides *ngIf="eventsData">...</ion-slides> ? — mickdev
– mickdev, Commented Mar 1, 2017 at 12:29

Community · Accepted Answer · 2017-05-23 12:32:29Z

4

Option 1 would be to use *ngIf as @mickdev already pointed via comment.

Option 2 would be to use forkJoin().

Observable.forkJoin(
   yourPlacesFunctionReturningAnObservable(),
   yourEventsFunctionReturningAnObservable())
.subscribe(result => {
   this.placesData = result[0];
   this.eventsData = result[1];
});

forkJoin will "wait" untill all observables are done.

docs: https://www.learnrxjs.io/operators/combination/forkjoin.html

so: https://stackoverflow.com/a/42373283/3631348

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 1, 2017 at 13:34

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 nested observable loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related