Angular rxjs forkjoin does not resolve array of chained observable

Question

I am working with Angular 10 and trying to handle multiple API calls using forkJoin. The API calls are defined inside a function where I also need to process the API result and then resolve each promise. I want to achieve the combined result of all these functions to be returned. However, the forkJoin is never resolved. What am I doing wrong. My code is as below:

const promises = [];   
for (let i = 0; i < bulkImportSets.length; i++) {
promises.push(
          this.policyService.importPolicy({files: bulkImportSets[i]}, this.selectedFiles)
      );
}
this.value$ = forkJoin(promises);




  importPolicy( policies, filesMetadata): Observable<any> {

        let result: { data: { items: { data: any[]; result_code: string } } } = null;

        return new Observable( (observer) => {
            const url = `${COMMON.LEGACY_API_PATH}sep/import/policy`;

            /*
             * This is done this way to send data via multipart/form-data
             * */
            const fd = new FormData();
            fd.append('policies', new Blob([JSON.stringify(policies)], {
                type: 'application/json'
            }));

            this.baseService.postData(url, fd).subscribe(
                (resolve) => {
                    result = resolve['data'];
                    observer.next(result);
                },
                (error) => {
                    result = getServiceFailureResponseJson(policies, filesMetadata, error);
                    observer.next(result);
                }
            );
        } );

    }

In error case the data needs to be transformed using 'getServiceFailureResponseJson' and still resolved.

postData is an http client call method:

postData(url: string, data?: any, params?: any): Observable<import("@angular/common/http").HttpEvent<any[]>>;

that is because just .next is not enough. you should also.complete your observables. add a complete call after next and it will work. also in most cases if you are using new Observable(... constructor, you are probably doing something wrong. there are a lot of methods/operators that do that work for you — Andrei
– Andrei, Commented Dec 16, 2020 at 12:16

Andrei · Accepted Answer · 2020-12-16 12:21:38Z

1

fixed importPolicy method would be

importPolicy( policies, filesMetadata): Observable<any> {

        const fd = new FormData();
            fd.append('policies', new Blob([JSON.stringify(policies)], {
                type: 'application/json'
            }));

        return this.baseService.postData(url, fd).pipe(
           map(resolve => resolve.data),
           catchError(error => of(getServiceFailureResponseJson(policies, filesMetadata, error)))
       );
    

    }

the difference from your code is that it is written using rxjs fns and it automatically completes itself. All other behavior is the same

answered Dec 16, 2020 at 12:21

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

2 Comments

Andrei Over a year ago

the issue of that should be inside of baseService.postData implementation

Prajakta Hali Over a year ago

I updated the map function to tap and got the result data.

Collectives™ on Stack Overflow

Angular rxjs forkjoin does not resolve array of chained observable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related