Angular RxJs how loop through array and assign http get requests to a single reactive observable

Question

I need some assistance trying to loop through array of string numbers and assign http get requests to each string number and then assign the results to a single reactive observable. I was able to pull this off at the component level but I need the result in a observable that comes from my service. I am trying to leverage RxJs but having issues figuring out the correct syntax here. Hopefully this makes sense, thanks.

myservice

constructor(http: HttpClient)

 issueNumberString: string[];
 issuesObservable$;
 newIssueObservable$;
 private URL = '/my/api/stuff/';


getInfo() {
 for (let index = 0; index < this.issueNumbersString.length; index++) {
this.https.get<any[]>(this.URL + this.issueNumbersString[index])
.subscribe((response: any) => {
 return this.issuesObservable$.push(...response.records)  
})
}

this.newObservable$ = this.getInfo();
}

.ts

newObservable$ = this.myservice.newObservable$;

constructor(private service: myservice)

html

<div *ngIf="newObservable$ | async as entry">
    <div *ngFor="let n of entry">

Hey, you should be using forkJoin for this instance. I have a couple of examples here(stackoverflow.com/a/55686179/10959940) and there (stackoverflow.com/a/59908693/10959940) — wentjun
– wentjun, Commented Jun 17, 2020 at 16:36

bryan60 · Accepted Answer · 2020-06-17 16:41:25Z

4

goal is alittle unclear, but you should use forkJoin to run an array of observables:

getInfo() {
  return forkJoin(
    this.issueNumbersString.map(i => 
      this.http.get<any[]>(this.URL + i))
  ).pipe(
    map(recordsArrays => recordsArrays.reduce((arr, r) => arr.concat(r.records), [])
  )
}

the forkJoin gives you an array of your responses, then the map operator at the end to reduces it to one array of all records.

edited Jun 17, 2020 at 16:41

answered Jun 17, 2020 at 16:35

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

Angular RxJs how loop through array and assign http get requests to a single reactive observable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related