typescript loop with a callback function executed at the conclusion

Question

typescript loop with a callback function executed at the conclusion

I am struggling with this code and it's driving me crazy.

addUpSpecificDaysOfWeek(daysInMonth: any, callbackFunction: any){
    var data = [];
    var that = this;
    daysMonth.forEach(function(day){
      that.statsService.fetchData(that.userid, day).subscribe(async (res: any) => {
        data = JSON.parse(JSON.stringify(res));
        console.log(that.data);
        that.data = that.data.map( function(value, index) {
          return value + data[index];
        });
      });
    });
    callbackFunction("this should be at the end");
  }

In this piece of code, I am fetching arrays from a server and adding them together into 'that.data' element by element. The process is working as expected, but I intend to calculate an average of the final result. Currently, I'm just using the callback function to display a message and check if it reaches the end, however, "this should be at the end" is being displayed before the summation loop begins.

  myCustomCallback(argument: any){
    console.log(argument);
  }

This is where the main method is called:

this.addUpSpecificDaysOfWeek(daysInMonth, this.myCustomCallback);

javascript angular typescript

Answer 1

Answer №1

Here is another approach using RxJS in a more elegant manner:

sumOfSpecificDaysInMonth(daysOfMonth: any, completionCallback: any){
    var values = [];
    var self = this;
    let observablesArray = []; 

    daysOfMonth.forEach(function(day){
      const obs = self.statsService.getData(self.userid, day);
      observablesArray.push(obs); 
      obs.subscribe(async (result: any) => {
        values = JSON.parse(JSON.stringify(result));
        console.log(self.values);
        self.values = self.values.map( function(val, index) {
          return val + values[index];
        });
      });
    });

    Observable.forkJoin(...observablesArray).subscribe(results => {
      completionCallback("this should be at the end");
    });
}

Answer 2

Here is another approach using RxJS in a more elegant manner:

sumOfSpecificDaysInMonth(daysOfMonth: any, completionCallback: any){
    var values = [];
    var self = this;
    let observablesArray = []; 

    daysOfMonth.forEach(function(day){
      const obs = self.statsService.getData(self.userid, day);
      observablesArray.push(obs); 
      obs.subscribe(async (result: any) => {
        values = JSON.parse(JSON.stringify(result));
        console.log(self.values);
        self.values = self.values.map( function(val, index) {
          return val + values[index];
        });
      });
    });

    Observable.forkJoin(...observablesArray).subscribe(results => {
      completionCallback("this should be at the end");
    });
}

Answer 3

Answer №2

Unfortunately, handling this type of scenario in JavaScript can be quite tricky. Essentially, what this code does is initiate a request for each item in daysMonth in the background, and then execute your callback function once all the asynchronous requests have been completed.

The key is to track when all the tasks have finished executing before triggering your callback function. A possible solution could look something like this:

var numDone = 0;

daysMonth.forEach(function(day){
  that.statsService.getData(that.userid, day).subscribe(async (res: any) => {
    numDone++;

    data = JSON.parse(JSON.stringify(res));
    console.log(that.data);
    that.data = that.data.map( function(v, i) {
      return v + data[i];
    });

    if(numDone == daysMonth.length) {
      callback("All done!")
    }
  });
});

This approach allows us to process the data within the getData() callback and call the outer callback function with the desired data only when all tasks have been completed.

It's worth noting that managing multiple asynchronous operations can quickly become complex. The async library provides a more structured solution for handling such scenarios, offering functions like async.map that might simplify your implementation.

Answer 4

Unfortunately, handling this type of scenario in JavaScript can be quite tricky. Essentially, what this code does is initiate a request for each item in daysMonth in the background, and then execute your callback function once all the asynchronous requests have been completed.

The key is to track when all the tasks have finished executing before triggering your callback function. A possible solution could look something like this:

var numDone = 0;

daysMonth.forEach(function(day){
  that.statsService.getData(that.userid, day).subscribe(async (res: any) => {
    numDone++;

    data = JSON.parse(JSON.stringify(res));
    console.log(that.data);
    that.data = that.data.map( function(v, i) {
      return v + data[i];
    });

    if(numDone == daysMonth.length) {
      callback("All done!")
    }
  });
});

This approach allows us to process the data within the getData() callback and call the outer callback function with the desired data only when all tasks have been completed.

It's worth noting that managing multiple asynchronous operations can quickly become complex. The async library provides a more structured solution for handling such scenarios, offering functions like async.map that might simplify your implementation.

Answer 5

Answer №3

it's crucial to handle the observable in a different manner

you should run an array of asynchronous operations and then execute a callback function

your code ought to be structured like this

getTotalForSpecificDayOfMonth(daysInMonth: any, callback: any){
    var data = [];
    var self = this;
    Observable.mergeArray(daysInMonth.map(day=> self.statisticsService.fetchData(self.userId, day)).subscribe((responses)=>{

// process the data accordingly
  callback("this must be placed at the end"); })


  }

Answer 6

it's crucial to handle the observable in a different manner

you should run an array of asynchronous operations and then execute a callback function

your code ought to be structured like this

getTotalForSpecificDayOfMonth(daysInMonth: any, callback: any){
    var data = [];
    var self = this;
    Observable.mergeArray(daysInMonth.map(day=> self.statisticsService.fetchData(self.userId, day)).subscribe((responses)=>{

// process the data accordingly
  callback("this must be placed at the end"); })


  }

typescript loop with a callback function executed at the conclusion

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

How can you transform the outcome of a TYPO3 repository search into a JSON format?

Storing and Retrieving User Identifiers in Next.js

Is there a replacement for findIndex in Internet Explorer?

Fixing the "Package Manager Not Found" Issue when Deploying a Next.js Project on Vercel

Understanding Angular's transclusion functionality and how it interacts with scopes

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Trouble with apostrophes rendering in JavaScript on WordPress posts

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

Step-by-step guide to implementing a Form filter in your Angular application

Is there a way to adjust the parameters of objects within my scene that were loaded using OBJMTLLoader?

Navigating through an array of latitude and longitude pairs during an AJAX request

showing the upload preview and disabling automatic uploading in Dropzone with React

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

Display a pop-up window using window.open and automatically print its contents using window.print upon loading

Is it achievable to animate dynamic height using CSS? Open to JS alternatives as well

Three Divs stacked on top of each other, with varying heights based on

Firebase cloud function encountered an issue: Error: EISDIR - attempting to perform an unauthorized operation on a directory

Adding elements to my state array - Utilizing Nextjs/React/Javascript

Set the position of a div element to be fixed