How to make Http Request over iterating array

Question

I'm stuck with this problem. Sharing the simplified pseudo code below:

    forkJoin({
        requestOne : this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
            .pipe(
              map((val:Response) => val.busStopList),
              map( val => val.map(q => q.stopId)),
              tap(ev => console.log('the results till now:', ev)



              // here is the line ************* [1] 
              // ["123", "234", "678" ...]

               {{  I have to make some http requests here  }}
              .
              .
              .

             ),

        requestTwo: this.http.get<Response2>('https://someapirequest.com/test/api/stop/closest?anotherone=abc')
.
.
.

in the code above in line[1] I am getting a string array like this ["123", "234", "687"..] in the tap operator wihch is totally fine. It's what I want to have till that line. but after that line I have to make sequential http requests with items of this array. For example, after line[1], I have to make these requests:

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item1=123')

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item2=234')

                                                                {array item here}
                                                                       |
this.http.get('https://someapirequest.com/test/api/stop/closest?item3=687')

I tried so many things, but couldn't reach the solution. The las point I have reached out is:

    .
    .
    .
    requestOne : this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
    .pipe(
      map((val:Response) => val.busStopList),
      map( val => val.map(q => q.stopId)),

      // in that point I have an **array** like this: ["123", "234", "678"]

      map(x => from(x)), //  [2]
      concatMap(arrayItem => {
      return this.http.get('https://someapirequest.com/test/api/stop/closest?item1=${arrayItem}')
      })  //  [3]
    .
    .
    .

But couldn't reach the solution. I tried converting array to observable with from in [2], and tried to make requests with concatMap over iterated values but failed. Is there any way?

You can't imagine how happy I would be with some help.

Picci · Accepted Answer · 2021-02-18 13:38:27Z

2

What I think you should do is the following

forkJoin([  // note that I am using an array as input to forkJoin
  this.http.get<Response>('https://someapirequest.com/test/api/stop/closest')
  .pipe(
     map((val:Response) => val.busStopList),
     map( val => val.map(q => q.stopId)),
     // create an array of Observables
     map((array, i) => {
       // the following map is the array method and not the rxjs map opeator
       return array.map(v => his.http.get(`https://someapirequest.com/test/api/stop/closest?item${i}={v}`);
     }),
     // use concatMap to make sure the next Observable is "executed" when the previous one completes
     concatMap(arrayOfObs => forkJoin(arrayOfObs)),
  ),
  .
  .
])

answered Feb 18, 2021 at 13:38

Picci

17.8k16 gold badges80 silver badges125 bronze badges

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

Comments

vitaliy kotov · Accepted Answer · 2021-02-18 13:22:02Z

2

I think you have to switchMap to another forkJoin after your tap operator. So it will be like:

tap(ev => console.log('the results till now:', ev),
switchMap((ev) => forkJoin(...ev.map((id) => url+id))

answered Feb 18, 2021 at 13:22

vitaliy kotov

6474 silver badges7 bronze badges

2 Comments

Fatih Ersoy Over a year ago

Yes, this really helps! But it gives a warning, "@deprecated — resultSelector is deprecated, pipe to map instead", is there a way to get rid of this?

vitaliy kotov Over a year ago

now forkJoin can accept an array, so to get rid of it you should remove the destructuring

seanplwong · Accepted Answer · 2021-02-18 14:24:50Z

1

https://rxjs-dev.firebaseapp.com/api/index/function/forkJoin
forkJoin([a, b]) accepts array, not object (forkJoin({ a: this.http.get('') })). So, it should be

forkJoin([this.http.get(''), this.http.get('')]);

so this is all about switchMap to another observable, see the first one

edited Feb 18, 2021 at 14:24

answered Feb 18, 2021 at 14:02

seanplwong

1,1016 silver badges14 bronze badges

2 Comments

Fatih Ersoy Over a year ago

Hello, // as of RxJS 6.5+ we can use a dictionary of sources, here:learnrxjs.io/learn-rxjs/operators/combination/forkjoin also it has used the same way in the link you shared.

seanplwong Over a year ago

oh, im really out of date

Collectives™ on Stack Overflow

How to make Http Request over iterating array

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related