Obtain the final result once all promises have been successfully resolved in a loop

Question

Obtain the final result once all promises have been successfully resolved in a loop

Here is an array of IDs:

let idsArray = [1, 2, 3, 4, 5];

How can I ensure that a promise is returned only after all calls made within the loop are completed?

            let deferredPromise = $q.defer(),
                finalResult = [];

            for (let i = 0; i < idsArray.length; i++) {
                let id = idsArray[i];

                Tools.remove(id).then(function(response) {
                    finalResult.push(response.id);
                }).catch(function(errorResponse) {
                    finalResult.push(errorResponse)
                });
            }

            deferredPromise.resolve(finalResult);

            return deferredPromise.promise;

javascript promise

Answer 1

Answer №1

If you're in search of $q.all, a method that allows you to wait for an array of promises, here's one way to approach it:

return $q.all(array.map(Tools.remove)).then(function(results){
    return results.map(function(result){ return result.id; });
});

Many other solutions provided have unnecessary complexities and rely on patterns that are deemed as anti-patterns within JavaScript or promise handling. This simple solution involves mapping each item to Tools.remove, waiting for the results, extracting the IDs, and returning them.

Answer 2

If you're in search of $q.all, a method that allows you to wait for an array of promises, here's one way to approach it:

return $q.all(array.map(Tools.remove)).then(function(results){
    return results.map(function(result){ return result.id; });
});

Many other solutions provided have unnecessary complexities and rely on patterns that are deemed as anti-patterns within JavaScript or promise handling. This simple solution involves mapping each item to Tools.remove, waiting for the results, extracting the IDs, and returning them.

Answer 3

Answer №2

It seems like your goal is not to simply hand back a promise once all tasks are completed, but rather to resolve it.

You may need to create a custom method for keeping track of the number of asynchronous calls still pending. One approach could be using a basic integer counter: increase it each time you initiate an async call, decrease it each time one completes. Upon completion, if any async call detects a count of 0, it can infer that it is the final async call and proceed with the next phase of execution.

To illustrate this with your specific scenario:

var taskCount = 0;
for (var j = 0; j < elements.length; j++) {
            var elementID = rows[j];

            taskCount++;
            Tools.delete(elementID).then(function(outcome) {
                outcome.push(outcome.id);
                taskCount--;
                if(taskCount === 0) invokeNextStep();
            });
        }

If concerns arise regarding overlapping responsibilities, consider transforming this into an async-manager entity.

Answer 4

It seems like your goal is not to simply hand back a promise once all tasks are completed, but rather to resolve it.

You may need to create a custom method for keeping track of the number of asynchronous calls still pending. One approach could be using a basic integer counter: increase it each time you initiate an async call, decrease it each time one completes. Upon completion, if any async call detects a count of 0, it can infer that it is the final async call and proceed with the next phase of execution.

To illustrate this with your specific scenario:

var taskCount = 0;
for (var j = 0; j < elements.length; j++) {
            var elementID = rows[j];

            taskCount++;
            Tools.delete(elementID).then(function(outcome) {
                outcome.push(outcome.id);
                taskCount--;
                if(taskCount === 0) invokeNextStep();
            });
        }

If concerns arise regarding overlapping responsibilities, consider transforming this into an async-manager entity.

Answer 5

Answer №3

Here's my approach :)

let list = [7, 8, 9, 10, 11];
let output = [];
let deferral = new $.Deferred();

let deferredList = $.map(list, function(id){
    
    let operationDeferred = Tools.executeOperation(id);

    operationDeferred.done(function(result) {
        output.push(result.id);
    }).catch(function (response) {
        output.push(response)
    });

    return operationDeferred;
});

$.when(deferredList).then(function(){
    deferral.resolve(output);
});

return deferral.promise();

Answer 6

Here's my approach :)

let list = [7, 8, 9, 10, 11];
let output = [];
let deferral = new $.Deferred();

let deferredList = $.map(list, function(id){
    
    let operationDeferred = Tools.executeOperation(id);

    operationDeferred.done(function(result) {
        output.push(result.id);
    }).catch(function (response) {
        output.push(response)
    });

    return operationDeferred;
});

$.when(deferredList).then(function(){
    deferral.resolve(output);
});

return deferral.promise();

Obtain the final result once all promises have been successfully resolved in a loop

Answer №1

Answer №2

Answer №3

Similar questions

Tips for accessing a unique window name in JavaScript

Retrieving JSON data using Jquery (undefined)

How to effectively test a form submission with an external API using React, Jest, and Enzyme?

Leverage JavaScript to showcase Django object on the webpage

What is the best way to incorporate jQuery code into a specific page on a WordPress site?

How can Chrome's display:none latency be eliminated?

Leveraging the local variables within a function in conjunction with the setTimeout method

Utilize Vue Component by assigning a computed property to the data source

How can data tables be generated using AJAX, JSON, HTML, and JS?

"Troubleshooting ways to resolve babel-eslint import/export issues without the need for a configuration

Share content on Facebook using a single-page application

Implement a loader in AngularJS to display when transitioning between pages

Pass the response from a JavaScript confirm dialog to a Ruby program

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

Images set as the og:image on the following 14 websites hosted on Vercel require authentication to be displayed

Print custom jQuery attribute to console or log output

Leveraging the power of AJAX to dynamically update information on a modal form using PHP's

Having completed "npm link" and "npm i <repo>", the module cannot be resolved despite the presence of "main" and "types" in the package.json file

The error message "TypeError ".deploy" is not a function in your Hardhat environment."

What is the purpose of <Component render={({ state }) => {} /> in React?