How to use Angular-6 HttpClient method in a for-loop

Question

I am trying to iterate one of my HTTP get() call. It doesn't work properly. I don't know in Angular 6 how can work HTTP method in for loop. Another issue is that If I omit the for loop then the rxjs delay() function doesn't work.

getRoleOftheUser() {

   for ( let i = 0; i < this.arr.length; i++) {
       return  this.http.get<any>(`${this.baseURL}/aaa/groups/${this.arr[i]}/effectiveRolesByUser`)
        .pipe(map(res => res) , delay(5000) ).subscribe(result => console.log(result));
        }
    }

This is not an asynchronous javaScript issue. It's all about rxjs looping. Does anyone please guide me how I can iterate HTTP call in for loop in Angular 6? Thanks

Side Note - Change your server API so that you only need to make one call. Making calls in a loop with a set of known parameters (ie. parameters not dependent on the result of each successive call) is bad design because 1) there are a limited number of http requests that can be made at any one time concurrently (number is browser dependent), you are creating a chatty application, you are adding server overhead, and you are adding lag/delay (slowest part of an app is anything it has to do externally). — Igor
– Igor, Commented Sep 26, 2018 at 18:15
Possible duplicate of How do I return the response from an asynchronous call? — Igor
– Igor, Commented Sep 26, 2018 at 18:17
See the proposed duplicate for how to do it though (sometimes you do not have source control over the end you are integrating with). Learn how to use asynchronous calls in javascript and then apply that to getting a combined result set from httpClient. — Igor
– Igor, Commented Sep 26, 2018 at 18:18

Trash Can · Accepted Answer · 2018-09-26 19:11:22Z

1

Why not taking advantage of rxjs' power? Something like this

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

.
.
.
getRoleOftheUser() {
  if (this.arr.length > 0)
    of(...this.arr)
      .pipe(
        concatMap(item => this.http.get<any>(`${this.baseURL}/aaa/groups/${item}/effectiveRolesByUser`)),
        delay(5000)
      )
      .subscribe(result => console.log(result));
}
.
.
.

edited Sep 26, 2018 at 19:11

answered Sep 26, 2018 at 18:18

Trash Can

6,8325 gold badges27 silver badges40 bronze badges

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

16 Comments

Riyad Over a year ago

Thanks a lot man. You are SuperMan. You saved me. Unfortunately, the first render of that component is not working. whenever I changed the component it's added the same value in my arr[] and then the getRoleOftheUser() is worked. And everytime I changed the component it's pushing the duplicate value of that arr[] array. Do you have any Solution SuperMan? Please

Trash Can Over a year ago

Before pushing a new item into your array, surround it with a if block checking that it is not in the array before pushing, from the code, I assume that the items are all strings, so you can do something like if (!this.arr.includes(newItem)) this.arr.push(newItem)

Riyad Over a year ago

getUserbyToken() {     const option = {       params: new HttpParams().set('token', this.token)     };     return this.http       .get<any>(

${this.baseURL}/auth/jwt/tokeninfo, option) .pipe( mergeMap(res => { return this.http .get<any>(${this.baseURL}/aaa/users/${res.uuid}/groups

)             .pipe(map(groups => groups));         })       ).subscribe(result => {         for ( let i = 0; i < result.length; i++) {           this.arr.push(result[i].uuid);         }         console.log(this.arr);       });   }

Riyad Over a year ago

SuperMan. This method is saving the arr[] which is some string. And my ngOnInit(){} is calling above both method. After first build of the app, the getRoleOftheUser() method does not work. Whever I changed the component url then it's called the ngOnInit() ad workes with duplicate values.

Trash Can Over a year ago

Yeah, replace this.arr.push(result[i].uuid); with if (!this.arr.includes(result[i].uuid)) this.arr.push(result[i].uuid)

|

Collectives™ on Stack Overflow

How to use Angular-6 HttpClient method in a for-loop

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related