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.

score 2 · Answer 1 · answered Feb 18 '21 at 13:22

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 '21 at 13:22

vitaliy kotov

570
3
5

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? – Fatih Ersoy Feb 18 '21 at 13:37
1

now forkJoin can accept an array, so to get rid of it [you should remove the destructuring](https://stackoverflow.com/questions/52486786/forkjoin-is-deprecated-resultselector-is-deprecated-pipe-to-map-instead) – vitaliy kotov Feb 18 '21 at 13:40

score 2 · Accepted Answer · answered Feb 18 '21 at 13:38

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)),
  ),
  .
  .
])

seanplwong · Answer 3 · 2021-02-18T14:24:50.727

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 '21 at 14:24

answered Feb 18 '21 at 14:02

seanplwong

1,051
5
14

Hello, // as of RxJS 6.5+ we can use a dictionary of sources, here:https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin also it has used the same way in the link you shared. – Fatih Ersoy Feb 18 '21 at 14:12
1

oh, im really out of date – seanplwong Feb 18 '21 at 14:20

How to make Http Request over iterating array

3 Answers3