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

Ways to release a client-side script with npm?

Running an npm audit on the project reveals numerous errors and vulnerabilities

Encountering a 404 error in Angular MVC project while trying to load a

Is it possible to automatically redirect to a different URL if the server is running slow when clicking?

Issue with onClick event not firing when using option tag in React

HTML - Using Tables to Add and Edit Rows

What steps do I need to take to transform this click event function into one that is triggered automatically upon the div loading?

What is the method for accessing extra parameters in the signIn() callback function in [...nextauth]?

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

`I'm having difficulty transferring the project to Typescript paths`

Unable to create selected buttons in Vue.js

Exploring Facebook Graph API response with Angular 2 Mapping

If a DOM element contains any text node, completely remove the element

Enhance data table by displaying a set number of rows that do not completely fill the table's height

Exploring the capabilities of require() in nodeJS

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Encountering an error in accessing my own API: "Cannot read property 'then

Amazon S3 Landing Page Featuring Contact Form

Can anyone figure out why this code is not functioning properly? It seems to be targeting the body element and all of

Accessing React Context globally using the useContext hook