What is the best way to trigger a code block once an observable in Angular has completed all of its tasks?

Question

What is the best way to trigger a code block once an observable in Angular has completed all of its tasks?

I have an observable made from an array of form controls in Angular. I am using dropdowns and inputs to calculate the sum of all currencies in relation to one currency, and it works. However, my issue is that when I want to update the field itself, the value of the sum is not changed immediately due to an HTTP request delay. I need to set the value of the field only when all the code has finished executing and the sum has its final form.

 let sum = 0;
 let arrayOfControls = [];

    for (let control of this.currencies.controls) {
      arrayOfControls.push(control);
    }

    const myObservable = from(arrayOfControls);

    const myObserver = {
      next: (control) => {
        let currency = control.get('dropdown').value;
        let amount = Number(control.get('amount').value);
        if (currency && amount) {
          this.updateRate(currency).subscribe((serverData) => {
            let rate = serverData['rates'][this.dropdown2.value];
            sum += amount * rate;
            // The sum changes here.
          });
        }
      },
      complete: () => {
         // When trying to set the value of the field, the sum may not have changed yet due to the delay.
        this.amount2.setValue(sum.toFixed(2));
      },
    };

    myObservable.subscribe(myObserver);

angular typescript rxjs observable

Answer 1

Answer №1

To optimize your code and avoid nested subscriptions, consider using higher order mapping operators such as switchMap. More information can be found here. Additionally, make use of the RxJS EMPTY constant to prevent emission when certain conditions are not met.

Give this approach a try:

import { from, EMPTY } from 'rxjs';
import { switchMap } from 'rxjs/operators';

let total = 0;
let controlArray = [];

for (let item of this.items.controls) {
  controlArray.push(item);
}

const customObservable = from(controlArray).pipe(
  switchMap(item => {
    let value = item.get('dropdown').value;
    let num = Number(item.get('amount').value);
    return (value && num) ? this.updateData(value) : EMPTY;
  })
);

const customObserver = {
  next: serverResponse => {
    let rateValue = serverResponse['rates'][this.dropdownSelection.value];
    total += num * rateValue; // update total
  },
  complete: () => {
    this.result.setValue(total.toFixed(2));
  },
};

customObservable.subscribe(customObserver);

Answer 2

To optimize your code and avoid nested subscriptions, consider using higher order mapping operators such as switchMap. More information can be found here. Additionally, make use of the RxJS EMPTY constant to prevent emission when certain conditions are not met.

Give this approach a try:

import { from, EMPTY } from 'rxjs';
import { switchMap } from 'rxjs/operators';

let total = 0;
let controlArray = [];

for (let item of this.items.controls) {
  controlArray.push(item);
}

const customObservable = from(controlArray).pipe(
  switchMap(item => {
    let value = item.get('dropdown').value;
    let num = Number(item.get('amount').value);
    return (value && num) ? this.updateData(value) : EMPTY;
  })
);

const customObserver = {
  next: serverResponse => {
    let rateValue = serverResponse['rates'][this.dropdownSelection.value];
    total += num * rateValue; // update total
  },
  complete: () => {
    this.result.setValue(total.toFixed(2));
  },
};

customObservable.subscribe(customObserver);

Answer 3

Answer №2

My approach to solving this problem is as follows:

I will create an array of updateRate function calls and utilize forkJoin method to synchronize their execution. Once all the calls are complete, I will calculate the sum of the products of rates * amounts.

The code implementation can be summarized as below:

const currencyRates = this.currencies.controls
  // Extract currency and amount values
  .map(control => ({
    currency: control.get('dropdown').value,
    amount: Number(control.get('amount').value)
  }))
  // Filter out controls with missing currency or amount
  .filter(({currency, amount}) => currency && amount)
  // Define updateRate call and map it to returned rate and amount
  .map(({currency, amount}) => 
    this.updateRate(currency).pipe(
      map(serverData => ({
        rate: serverData['rates'][this.dropdown2.value],
        amount
      }))
    )
  );

let totalSum: number;
// Execute updateRate calls in parallel and collect results in an array
forkJoin(currencyRates).subscribe(results => 
  // Calculate the sum by multiplying each amount with its corresponding rate
  totalSum = results.reduce(
    (acc, curr) => acc + (curr.amount * curr.rate), 
    0
  )
);

Answer 4

My approach to solving this problem is as follows:

I will create an array of updateRate function calls and utilize forkJoin method to synchronize their execution. Once all the calls are complete, I will calculate the sum of the products of rates * amounts.

The code implementation can be summarized as below:

const currencyRates = this.currencies.controls
  // Extract currency and amount values
  .map(control => ({
    currency: control.get('dropdown').value,
    amount: Number(control.get('amount').value)
  }))
  // Filter out controls with missing currency or amount
  .filter(({currency, amount}) => currency && amount)
  // Define updateRate call and map it to returned rate and amount
  .map(({currency, amount}) => 
    this.updateRate(currency).pipe(
      map(serverData => ({
        rate: serverData['rates'][this.dropdown2.value],
        amount
      }))
    )
  );

let totalSum: number;
// Execute updateRate calls in parallel and collect results in an array
forkJoin(currencyRates).subscribe(results => 
  // Calculate the sum by multiplying each amount with its corresponding rate
  totalSum = results.reduce(
    (acc, curr) => acc + (curr.amount * curr.rate), 
    0
  )
);

What is the best way to trigger a code block once an observable in Angular has completed all of its tasks?

Answer №1

Answer №2

Similar questions

Determine characteristics of object given to class constructor (typescript)

Guide on switching locales from US to Japan in react-big-calendar

What is the correct way to utilize the mapState function within a TypeScript environment while implementing Vuex?

Issue when transmitting information from Angular to Express

Modify the state of a Babylon JS instance that was set up within an Angular 2 component

Stop useEffect from triggering during the first render

Guide on how to add a generic return type to a function in typescript

An easy guide on incorporating external npm modules into Angular 2, such as an encryption library

Jest encounters an issue while attempting to import Primeng CSS files

Issue with Formik compatibility in Next JS 14 Application Structure

Encountered a unique error code "TS1219" in Visual Studio

Discover the wonders of utilizing @blur events on your custom Vue components!

Access to Angular 7 granted through Gmail authentication

How can I enable editing for specific cells in Angular ag-grid?

How can I dynamically reference two template HTML files (one for mobile and one for desktop) within a single component in Angular 6?

I am encountering a problem with HttpClient Angular POST when trying to communicate with Google FCM Server. How can I

Angular 2 Directive for Ensuring Required Conditions

What is the process for attaching a function to an object?

What is the process of playing blob videos (avi, mov) in Angular14?

Efficiently transforming a nested object array into a single dynamic array