how to subscribe an observable asynchronously from an array - angular

Question

I have an array contains IDs and I want to subscribe to an observable for each ID in the array in an orderly manner (make a request for id 1 then 2 ...). I've tried foreach loop but the responses were unordered. and tried to create a for loop and increase the index from the subscriber but the browser crushed(because tons of requests have been sent before the index changed)

my code:

const uniqueGroups=[1,2,3,4,5,6];
uniqueGroups.forEach(groupId => {
    this.magB1BaseService.getAttributeGroup(groupId)
      .subscribe(data => {
        this.AttributeGroups.push(data);
          this.AttributeGroupsCollapses[data.ID] = false;
        });
    });

try concatMap instead of forEach

alexleo2000
– alexleo2000

2021-12-23 09:25:30 +00:00
Commented Dec 23, 2021 at 9:25 — alexleo2000
– alexleo2000, Commented Dec 23, 2021 at 9:25

mak15 · Accepted Answer · 2021-12-23 09:30:53Z

2

One way to implement this is like below:

    const uniqueGroups = of(1, 2, 3, 4, 5, 6);
    
    uniqueGroups.pipe(concatMap(groupId => (
      this.magB1BaseService.getAttributeGroup(groupId))
      .subscribe(data => {
        this.AttributeGroups.push(data);
        this.AttributeGroupsCollapses[data.ID] = false;
      })));

edited Dec 23, 2021 at 9:30

answered Dec 23, 2021 at 9:24

mak15

4383 silver badges14 bronze badges

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

2 Comments

James.mikael Over a year ago

what if I don't know the array values? how can I make it like uniqueGroups in your code?

mak15 Over a year ago

You can also use Observable.of(uniqueGroups);

WangJie · Accepted Answer · 2021-12-23 10:04:43Z

1

Use concat operator to subscribe one by one.

const uniqueGroups = [1,2,3,4,5,6];
let obs: Array<Observable<any>> = [];
uniqueGroups.forEach( groupId => {
   obs.push(this.magB1BaseService.getAttributeGroup(groupId));
});
concat(...obs).subscribe( data => {
   this.AttributeGroups.push(data);
   this.AttributeGroupsCollapses[data.ID] = false;
});

edited Dec 23, 2021 at 10:04

answered Dec 23, 2021 at 9:51

WangJie

265 bronze badges

2 Comments

Tyler2P Over a year ago

Please don't post only code as an answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

James.mikael Over a year ago

@WangJie your answer has one error let obs Observable<any>=[] should be let obs Observable<any>=[] , and it works as well, thanks

Collectives™ on Stack Overflow

how to subscribe an observable asynchronously from an array - angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related