#Wait for more than one http call to complete and merge them together into one output

14 messages · Page 1 of 1 (latest)

maiden raptor
#

Here's the working code sample:

from(this.files)
            .pipe(
              concatMap((item) =>
                this.http.get(item.upper, {
                  responseType: "blob" as "json",
                }),
              )
            )
            .subscribe({
              next: (res) => {
                console.log(res);
              },
              complete() {
                console.log("it has completed");
              },
            });

and I want to add another request and wait for both of them to complete to fire the next one like so

from(this.files)
            .pipe(
              mergeThemFunction({
              concatMap((item) =>
               upper: this.http.get(item.upper, {
                  responseType: "blob" as "json",
                }),
                concatMap((item) =>
               lower:this.http.get(item.lower, {
                  responseType: "blob" as "json",
                }),
                }
              )
            )
            .subscribe({
              next: (res) => {
                console.log(res);
              },
              complete() {
                console.log("it has completed");
              },
            });

What rxjs method is most suitable for this, the documentation doesn't say much

pale spruce
maiden raptor
#

so forkJoin?

#

man that link is useful

maiden raptor
pale spruce
#

So you have two observables you want to combine, and you want to subscribe to each of them in order...

mellow parcel
#

I feel like that's what u want. Concat as per that rxjsdev decision link (not forkJoin, you clicked the wrong element in the second step), potentially adding a toArray as needed, depending how u want to use it.

maiden raptor
mellow parcel
#

That SO answer has An example.

#

If they need to emit a value from the first that u need to use in the next, you might not need concat tho. Is that what u need ?

pale spruce
# 
from(this.files)
            .pipe(
              concatMap((item) => {
                const upper = this.http.get(item.upper, {
                  responseType: "blob" as "json",
                });
                const lower = this.http.get(item.lower, {
                  responseType: "blob" as "json",
                });
                return concat(upper, lower);
              })
            )
            .subscribe({
              next: (res) => {
                console.log(res);
              },
              complete() {
                console.log("it has completed");
              },
            });
maiden raptor
#

It's clear and what I needed. I will look more into it to not fall into similar situation next time.
Thank you both Fredrik and jbnizet for your valuable time.

maiden raptor