The significance of sequence in Angular2 Observable handling

Question

The significance of sequence in Angular2 Observable handling

When dealing with observables in a component that makes multiple API calls using a service, is there a way to ensure that one observable completes before another starts?

For example, how can we make sure that the getOptions function finishes executing before the getReport function is triggered? The getReport function depends on data obtained by getOptions.

  ngOnChanges() {
    if (this.treeResult != null) {              
      for (var index = 0; index < this.treeResult.length; index++) {        
        var element = this.treeResult[index];               
          this.thumbnailView = null;

          this.getOptions(element.id);            

          this.getReport(element.id, this.a, this.b, element.c);              
      }
    }
  }

  getOptions(id: number) {
    this._Service.GetOptions(id)
      .subscribe(options => { this.select = options[0].Options1, this.num = options[0].Options1[0].optionId,
                              error => this.errorMessage = <any>error)
  }  

  getReport(id: number, a: number, b: number, c: string) {
    this._Service.GetReport(id, a, b, c)
      .subscribe(data => { this.data = data }, error => this.errorMessage = <any>error);
  }

If you need more information or clarification, feel free to ask!

typescript angular observable

Answer 1

Answer №1

A solution is to invoke the second observable inside the done() function of the first one:

 ngOnChanges() {
    if (this.treeResult != null) {              
      for (var index = 0; index < this.treeResult.length; index++) {        
        var element = this.treeResult[index];               
          this.thumbnailView = null;

          this.fetchOptions(element.id, element.c);                       
      }
    }
  }

  fetchOptions(id: number, c : any) {
    this._Service.GetOptions(id)
      .subscribe(options => { 
              this.select = options[0].Options1;
              this.num = options[0].Options1[0].optionId;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
              this.retrieveReport(id, this.a, this.b, c);
          });
  }  

  retrieveReport(id: number, a: number, b: number, c: string) {
    this._Service.GetReport(id, a, b, c)
      .subscribe(data => { 
               this.data = data;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
          });
  }

Answer 2

A solution is to invoke the second observable inside the done() function of the first one:

 ngOnChanges() {
    if (this.treeResult != null) {              
      for (var index = 0; index < this.treeResult.length; index++) {        
        var element = this.treeResult[index];               
          this.thumbnailView = null;

          this.fetchOptions(element.id, element.c);                       
      }
    }
  }

  fetchOptions(id: number, c : any) {
    this._Service.GetOptions(id)
      .subscribe(options => { 
              this.select = options[0].Options1;
              this.num = options[0].Options1[0].optionId;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
              this.retrieveReport(id, this.a, this.b, c);
          });
  }  

  retrieveReport(id: number, a: number, b: number, c: string) {
    this._Service.GetReport(id, a, b, c)
      .subscribe(data => { 
               this.data = data;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
          });
  }

Answer 3

Answer №2

To run observables in sequence, you can make use of the flatMap operator.

Below is an example demonstrating how to implement it within your scenario:

  ngOnChanges() {
    if (this.treeResult != null) {              
      this.treeResult.forEach(element => {
        this.thumbnailView = null;

        this.getOptions(element.id).flatMap(() => { // <------
          this.getReport(element.id, this.a, this.b, element.c);
        }).subscribe();
      });
    }
  }

  getOptions(id: number) {
    return this._Service.GetOptions(id)
      .map(options => { // <-----
        this.select = options[0].Options1;
        this.num = options[0].Options1[0].optionId
      })
      .catch(error => this.errorMessage = <any>error);
  }  

  getReport(id: number, a: number, b: number, c: string) {
    return this._Service.GetReport(id, a, b, c)
      .map(data => {
        this.data = data;
      })
      .catch(error => this.errorMessage = <any>error);
  }

Answer 4

To run observables in sequence, you can make use of the flatMap operator.

Below is an example demonstrating how to implement it within your scenario:

  ngOnChanges() {
    if (this.treeResult != null) {              
      this.treeResult.forEach(element => {
        this.thumbnailView = null;

        this.getOptions(element.id).flatMap(() => { // <------
          this.getReport(element.id, this.a, this.b, element.c);
        }).subscribe();
      });
    }
  }

  getOptions(id: number) {
    return this._Service.GetOptions(id)
      .map(options => { // <-----
        this.select = options[0].Options1;
        this.num = options[0].Options1[0].optionId
      })
      .catch(error => this.errorMessage = <any>error);
  }  

  getReport(id: number, a: number, b: number, c: string) {
    return this._Service.GetReport(id, a, b, c)
      .map(data => {
        this.data = data;
      })
      .catch(error => this.errorMessage = <any>error);
  }

The significance of sequence in Angular2 Observable handling

Answer №1

Answer №2

Similar questions

The PrimeNg confirmDialog is updating my navbar with some modifications

trpc - Invoking a route from within its own code

What is the method for showing the number of characters in a string within a textfield by utilizing events in Angular

Steps for creating a copy of an Angular component

Deactivate the next button on the paginator within the PrimeNG p-table

The use of supportedChain is no longer recommended, networks should be passed instead

Angular - Loading images on demand

The Angular frontend is failing to receive the expected response when making an http request to the Express backend

Encountering an issue with accessing a property in Angular's TypeScript module

Maintain the variable name when using destructuring in JavaScript/TypeScript

Vue: rendering props cannot be utilized with TSX

The constant value being brought in from an internal npm package cannot be determined

Using Angular 2 to pass @Input values from a dropdown selection

Are the Angular App routerlinks functioning properly in development but encountering issues in the production environment?

What is the best way to update an array in TypeScript when the elements are of different types and the secondary array has a different type as

Utilizing closure to implement a counting mechanism within a function

Exploring TypeScript: TS2349 - The function you are trying to call is not callable. The type 'never' does not have any call signatures

The imported symbol from the typescript library cannot be found

Tips for validating a form with a condition in Angular 6

Is there a way to retrieve the index and specific object that was modified using $watch in Angular?