How to make multiple http subscribe inside a loop in Angular?

Question

I am stuck in a situation where I have to loop through an array of strings that are passed to service as a parameter which gives a response through the HTTP subscribe method. And some operations were made with a response.

But the issue is, the subscribe event skips the operations and moves to the next string in the loop, which in turn returns undefined.

My TS looks like -

ngOnInit() {

this.locString.push('57b17265-2629-4ca9-ac1f-d20d59544343');
this.locString.push('cefead77-b413-43c9-9ba8-d917a0e56a7b');
this.locString.push('58d39891-cae2-4818-838f-162426030132');

}

show(){
    var userList = ''
    for(var str of this.locString){
        this.tableService.getDataWithParams(str).subscribe(res=>{
          for(var abc of res){
            userList+= abc.Username + ',';
          }
        });
      }
      console.log(userList);
    }

}

The API call returns the value as -

[{"Id":1,"Username":"Hull","City":"Cleary","Country":"Seychelles"},{"Id":1,"Username":"Palmer","City":"Tuskahoma","Country":"Niger"},{"Id":1,"Username":"Brennan","City":"Sanborn","Country":"Bosnia and Herzegovina"},{"Id":1,"Username":"Gill","City":"Logan","Country":"French Guiana"},{"Id":1,"Username":"Sloan","City":"Neibert","Country":"Australia"}]

My expected O/P is all the usernames for every result formed by the locString array -

Hull, Palmer, Brennan, Gill, Sloan, .....( and so on for all strings in the array locString )

Have created a StackBlitz link for the same. Please help. TIA

use forkJoin, see, e.g. this SO:https://stackoverflow.com/questions/65344100/is-there-a-more-efficient-way-to-have-a-subscription-in-a-subscription-in-typesc — Eliseo, Aug 03 '21 at 07:30
Can you please edit my stackblitz link with forkJoin , that would be very helpful . The exmaple contains subscribe inside a subscribe which is not i am looking for . — Sunny Srivastava, Aug 03 '21 at 07:33
The issue is console log executes before the api resolve and have response there could be several ways to fix. Are you using `userList` in template? — Kamran Khatti, Aug 03 '21 at 07:45
@Sunny, I wrote a response "step by step", I'm in hurry to explain it, sorry. see that with forkJoin in res we has an array with the response of each "call", map transform a response in another — Eliseo, Aug 03 '21 at 07:49
@KamranKhatti I have to pass userList to a different method . — Sunny Srivastava, Aug 03 '21 at 07:54

score 1 · Accepted Answer · answered Aug 03 '21 at 07:48

some like

forkJoin(this.locString.map(str=>this.tableService.getDataWithParams(str)))
.subscribe((res:any[])=>{
      console.log(res)
    })

give us an array of three elements each element is another array

As we only want the unique names of the response we can make a forkJoin only with the response of the names

 forkJoin(this.locString.map(str=>this.tableService.getDataWithParams(str).pipe(
      map((res:any[])=>{
      return res.map(x=>x.Username)
    }))))
 .subscribe((res:any[])=>{
          console.log(res)
        })

As we want the uinque values we can use reduce

forkJoin(this.locString.map(str=>this.tableService.getDataWithParams(str).pipe(map((res:any[])=>{
  return res.map(x=>x.Username)
}))))
.pipe(map((res:any[])=>res.reduce((a:string[],b:string[])=>
  [...a,...b.filter(x=>a.indexOf(x)<0)]
,[]))
).subscribe((res:any[])=>{
  console.log(res)
})

How to make multiple http subscribe inside a loop in Angular?

1 Answers1

Linked