Angular 2: Chaining RxJS Observables in Route Resolver

Question

I am trying to get all the data from a chain of observables in a resolver. I first need to make a http call to get all the types and with an array returned, I need to loop through the array of types and get all the data for each type. At the end, I want to return an array or all of the data for each type at once (before navigating to the route).

getAllTypesDataResolverFunction() {
        this.getAllTypes()
            .flatMap(data => {
                let allTypesData = [];

                data.forEach(i => {
                    if(i.type === 4) {
                        allTypesData.push({'typeObj': i});
                        return Observable.forkJoin([this.getDataForType(), this.getMoreDataForType()])
                          .subscribe(data => {
                                let arrayLength = allTypesData.length-1;
                                allTypesData[arrayLength].typeObjData = data;
                          })

                    }
                })
                return allTypesData;
            }).subscribe(data => {
                return data;
            })
}

With the code I have right now, the resolver seems to not be complete (or at least not complete the nested observables and thus, the data returned for that observable is undefined in the component. Can anyone suggest a way to resolve this issue? Thanks!

Nicolas ABRIC Nicolas ABRIC · Accepted Answer · 2017-02-15T17:05:00

You can have a look at this great blog article and especially the example in section called :

Combining Observables in series and in parallel

that seems to achieve exactly what you want to do.

In your case you may consider Array.filter function before mapping your data, as you seem interested only by data of type 4 (and maybe use an enum instead of a magic number).

Angular 2: Chaining RxJS Observables in Route Resolver

1 Answers