Fatih Ersoy
Fatih Ersoy

Reputation: 729

How to make Http Request over iterating array

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.

Upvotes: 0

Views: 746

Answers (3)

seanplwong
seanplwong

Reputation: 1081

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

Upvotes: 1

Picci
Picci

Reputation: 17752

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

Upvotes: 2

vitaliy kotov
vitaliy kotov

Reputation: 647

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))

Upvotes: 2

Related Questions