How to wait in Angular for two calls to finish

Question

I have this function that I want to run. The problem is that it doesn't wait for the two calls to finish and instantiate rule1 and rule2 so I get error that rule1.optionhead is undefined. I have tried to have the code nested to each subscribe but then the create execution happens more times than I want. What can I do to fix it?

To clarify, I use this for loop because the selectedScenario is an array of IDs which are in an input form ngValue

saveFunction() {

  for (const pair of this.selectedScenario) {
    this.ruleToSave = null;

    this.ruleService.find(pair[0]).subscribe((ruleResponse: HttpResponse < Rule > ) => {
      this.rule1 = ruleResponse.body;

    });

    this.ruleService.find(pair[1]).subscribe((ruleResponse: HttpResponse < Rule > ) => {
      this.rule2 = ruleResponse.body;

    });

    const head1 = this.rule1.optionHead;
    const head2 = this.rule2.optionHead;

    if (
      this.selectedOption === head1 &&
      this.selectedOption !== head2 &&
      (this.selectedWeakerOption === '' || head2 === this.selectedWeakerOption)
    ) {
      ..some code
      this.subscribeToSaveResponse(this.ruleService.createRule(this.ruleToSave));
    }

  }
}

You aren't actually waiting for *either*, let alone both. I'd recommend reading up on RxJS, and async in general. — jonrsharpe, Sep 22 '18 at 13:50
You can use one of the rxjs operator `combineLatest` or `forkJoin` — Borad Akash, Sep 22 '18 at 13:52
@BoradAkash So, you propose to use forkJoin and in the subscribe i will paste all the other code? — Antifa, Sep 22 '18 at 13:59

score 1 · Accepted Answer · answered Sep 22 '18 at 14:01

Try ForkJoin

  Observable.forkJoin([
                this.ruleService.find(pair[0]),
                this.ruleService.find(pair[1])])
                .subscribe(
    (result: any[]) =>{ 
           this.rule1 = result[0]; 
           this.rule1 = result[1]; 

        ..Your code

    }
    );

score -2 · Answer 2 · answered Sep 22 '18 at 13:52

-2

You should use this code for that

removeAll() {
  Promise.all([
    this.storage.remove(key1),
    this.storage.remove(key2),
    this.storage.remove(key3),
  ]).then(value => doSomething());

answered Sep 22 '18 at 13:52

superdev810

34
4

2

If you are going to post and answer, you should make it relevant to the OP. What you have posted here doesn't seem to have anything to do with what was asked above. Nor does it have any explanation of what you are solving with this code. – R. Richards Sep 22 '18 at 13:57

How to wait in Angular for two calls to finish

2 Answers2