Utilizing Observables in a method with multiple if-conditions

Question

Utilizing Observables in a method with multiple if-conditions

There have been multiple instances where I encountered difficulties in implementing a more reactive approach, especially when trying to figure out how to make a method return an Observable in a clean manner.

Here is an example of the code snippet:

public updateItemEligibility(item: Item): void
{
        this.updateCalculations(item);
        if (item.status == Status.Full)
        {
            this.markEligibleItem(item);
        }

        if (item.quantity > 0 && item.Stage == 1)
        {
           const info: ItemInfo =  this.getAdditionalInfoFromApi(); // will use observable
           if (info.Staged)
           {
               this.updateStagedCalculations(item);
           }
        }

        if (item.quantity == 0 && item.Stage == 2)
        {
           const stagingInfo: StagingInfo =  this.getStaginInfoFromApi();
           item.eligible = this.allowStagedItems && item.amount > 0 && stagingInfo.Stages[item.stage].Completed == true;
        }
        this.updateTotals(item);
}

One significant issue here is the necessity to call the API only when specific conditions are met.

angular typescript rxjs reactive-programming

Answer 1

Answer №1

If your query is about finding a method that generates an Observable to signal when the item undergoes an update, then the suggested approach is outlined below (comments are included to clarify the process)

 public updateItemEligibility(item: Item): Observable<Item> {
    // Initial steps likely involve synchronous operations
    this.updateCalculations(item);
    if (item.status == Status.Full) {
      this.markEligibleItem(item);
    }
    // Let's move on to the conditional checks.
    if (item.quantity > 0 && item.Stage == 1) {
      // Here, we aim to return an Observable that alerts post the completion of getAdditionalInfoFromApi
      // Leveraging the map operator to ensure notification with item as the value
      // after all necessary actions are taken
      return this.getAdditionalInfoFromApi().pipe(
        map((info: ItemInfo) => {
          if (info.Staged) {
            this.updateStagedCalculations(item);
            this.updateTotals(item);
            return item;
          }
        })
      );
    }
    // Next, we have the second conditional check
    if (item.quantity == 0 && item.Stage == 2) {
      // Similar to the above, we generate an Observable that signals completion of getStaginInfoFromApi
      // (assuming it returns an Observable) and utilize map
      // to notify with item as the value
      return this.getStaginInfoFromApi().pipe(
        map((stagingInfo: StagingInfo) => {
          item.eligible =
            this.allowStagedItems &&
            item.amount > 0 &&
            stagingInfo.Stages[item.stage].Completed == true;
          this.updateTotals(item);
          return item;
        })
      );
    }
    // Should none of the above conditions apply, an
    // Observable that instantaneously notifies with item as the value is returned
    // using the of function
    this.updateTotals(item);
    return of(item);
  }
}

Answer 2

If your query is about finding a method that generates an Observable to signal when the item undergoes an update, then the suggested approach is outlined below (comments are included to clarify the process)

 public updateItemEligibility(item: Item): Observable<Item> {
    // Initial steps likely involve synchronous operations
    this.updateCalculations(item);
    if (item.status == Status.Full) {
      this.markEligibleItem(item);
    }
    // Let's move on to the conditional checks.
    if (item.quantity > 0 && item.Stage == 1) {
      // Here, we aim to return an Observable that alerts post the completion of getAdditionalInfoFromApi
      // Leveraging the map operator to ensure notification with item as the value
      // after all necessary actions are taken
      return this.getAdditionalInfoFromApi().pipe(
        map((info: ItemInfo) => {
          if (info.Staged) {
            this.updateStagedCalculations(item);
            this.updateTotals(item);
            return item;
          }
        })
      );
    }
    // Next, we have the second conditional check
    if (item.quantity == 0 && item.Stage == 2) {
      // Similar to the above, we generate an Observable that signals completion of getStaginInfoFromApi
      // (assuming it returns an Observable) and utilize map
      // to notify with item as the value
      return this.getStaginInfoFromApi().pipe(
        map((stagingInfo: StagingInfo) => {
          item.eligible =
            this.allowStagedItems &&
            item.amount > 0 &&
            stagingInfo.Stages[item.stage].Completed == true;
          this.updateTotals(item);
          return item;
        })
      );
    }
    // Should none of the above conditions apply, an
    // Observable that instantaneously notifies with item as the value is returned
    // using the of function
    this.updateTotals(item);
    return of(item);
  }
}

Utilizing Observables in a method with multiple if-conditions

Answer №1

Similar questions

Vercel is encountering difficulty locating a module or type declaration during the construction of a Next.js application

Protractor end-to-end tests fail to run properly when the `--spec` flag is utilized

Customizing the Position of Material UI Select in a Theme Override

ngx-upload-core and media files

What is the process of creating the /dist folder in an unreleased version of an npm package?

Having trouble utilizing the ng-Command in Angular?

Having trouble installing plugins on Ionic 6. Every time I try, an error pops up. Any suggestions on how to proceed?

Locking mat-toolbar and mat-tabs to the top in Angular Material 2

It is not always a guarantee that all promises in typescript will be resolved completely

Best practices for incorporating CSS and JS files into an Angular deployment

Customizing the Android Back Button behavior in NativeScript for a single specific page

Error: Select dropdown placeholder malfunctioning

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Using TypeScript to wrap a class with a Proxy object

Description of how to define rows and columns for a Quasar QTable using TypeScript

Using the spread operator to modify an array containing objects

Node.js/TypeScript implementation of the Repository design pattern where the ID is automatically assigned by the database

Step-by-step guide for resolving the issue of "Observable.share is not recognized as a function" in Angular 2

HTML various button designs - such as a cogwheel

Issues arise when attempting to store data into an array with the assistance of FileReader