Looping through an array of items in a for loop with a chain of

Question

Looping through an array of items in a for loop with a chain of

I want to ensure that the for loop is successfully executed and then the result is passed to the next function:

FindIdsRequests =  function(){
    results = $scope.requests
    var deferred = $q.defer();
    var promise = deferred.promise;
    var array = []
    for (var i in results) {
        promise = promise.then(function(){
            array.push(results[i].uid)      
        })
        return promise
    }
    return promise.then(function(){
        return array
    })
}

$scope.ConfirmRequests = function(){
    //alert('req'+JSON.stringify($scope.requests))
    FindIdsRequests().then(function(array){
        alert('arr'+JSON.stringify(array))
    })
})

It seems that the FindIdsRequests function should be returning the result of the for loop, but it doesn't (the alert message is not displayed, so it seems not to be reaching that point). Any suggestions?

javascript angularjs promise

Answer 1

Answer №1

Challenges:

Each iteration of the loop is replacing the previous promise, resulting in only one promise existing at a time
Without resolving the promise, the then() function will never be triggered, leaving the array empty
A return statement within the loop causes it to break after the first iteration, preventing it from completing
If this were an asynchronous process, the value of i would not be what you expect inside the then() function due to the promise resolving after i has finished

It seems unnecessary to write this code considering it is synchronous and does not require the use of promises

Answer 2

Challenges:

Each iteration of the loop is replacing the previous promise, resulting in only one promise existing at a time
Without resolving the promise, the then() function will never be triggered, leaving the array empty
A return statement within the loop causes it to break after the first iteration, preventing it from completing
If this were an asynchronous process, the value of i would not be what you expect inside the then() function due to the promise resolving after i has finished

It seems unnecessary to write this code considering it is synchronous and does not require the use of promises

Answer 3

Answer №2

Instead of returning a promise, you can leverage the $q service in the following way:

$q.all([promise1, promise2]);

For instance:

FindIdsRequests =  function(){

    var requests = $scope.requests;
    var results = [];    
    var array = [];

    for (var i in requests) {

        var req = $http.get('http://someUrl.com/' + requests[i].uid);

        array.push(req);

        req.then(function (response) {
            results.push(response.data);
        });
    }

    return $q.all(array).then(function(){
        return results;
    });
}

This piece of code will provide a promise that resolves once all promises in the array have resolved.

Answer 4

Instead of returning a promise, you can leverage the $q service in the following way:

$q.all([promise1, promise2]);

For instance:

FindIdsRequests =  function(){

    var requests = $scope.requests;
    var results = [];    
    var array = [];

    for (var i in requests) {

        var req = $http.get('http://someUrl.com/' + requests[i].uid);

        array.push(req);

        req.then(function (response) {
            results.push(response.data);
        });
    }

    return $q.all(array).then(function(){
        return results;
    });
}

This piece of code will provide a promise that resolves once all promises in the array have resolved.

Answer 5

Answer №3

Appreciation goes out to @charlietlf for the helpful comments. I've made some adjustments based on the feedback and now the code is functioning properly:

FindIdsRequests =  function(){

    results = $scope.requests
    var deferred = $q.defer();
    var promise = deferred.promise;
    var array = []
    for (var i in results) {
        alert('www'+JSON.stringify(results[i].uid))
        var obj = results[i].uid
        promise = promise.then(function(){
            array.push(results[i].uid)      
        })
        //return promise
    }
    deferred.resolve(array)
    return promise.then(function(){
            alert('ee'+JSON.stringify(array))
            return array
     })
}

It seems I had forgotten to include the resolve function, which was causing the issue.

Answer 6

Appreciation goes out to @charlietlf for the helpful comments. I've made some adjustments based on the feedback and now the code is functioning properly:

FindIdsRequests =  function(){

    results = $scope.requests
    var deferred = $q.defer();
    var promise = deferred.promise;
    var array = []
    for (var i in results) {
        alert('www'+JSON.stringify(results[i].uid))
        var obj = results[i].uid
        promise = promise.then(function(){
            array.push(results[i].uid)      
        })
        //return promise
    }
    deferred.resolve(array)
    return promise.then(function(){
            alert('ee'+JSON.stringify(array))
            return array
     })
}

It seems I had forgotten to include the resolve function, which was causing the issue.

Answer 7

Answer №4

Creating a Chain of Promises from an Array of Promises

Utilize $.when to initiate an empty promise and employ a for loop to construct a chain:

function chainPromiseArray(promiseArray){
    var promise = $q.when();
    var array = [];
    for (var i=0;  i < promiseArray.length; i++) {
        promise = promise.then(function(){
            var derivedPromise = promiseArray[i].then(function(result) {
                //push data
                array.push(result.data);
            });
            //return promise to chain
            return derivedPromise;
        });
    };
    var finalPromise =  promise.then(function(){
        return array;
    });
    return finalPromise;
};

The example above initializes with an empty promise and progresses through a chain stemming from that initial promise. The final promise will result in the array generated by the chain.

Chaining promises

As the .then method of a promise generates a new derived promise, it is feasible to construct a series of promises. These chains can vary in length, and since a promise can resolve with another promise (thus deferring its resolution), it becomes viable to pause or defer the resolution of promises at any point within the chain. This functionality enables the implementation of robust APIs.

--AngularJS $q Service API Reference -- chaining promises

The sequential execution of promises is demonstrated in the example provided. For simultaneous execution of promises, consider utilizing the $q.all method.

Answer 8

Creating a Chain of Promises from an Array of Promises

Utilize $.when to initiate an empty promise and employ a for loop to construct a chain:

function chainPromiseArray(promiseArray){
    var promise = $q.when();
    var array = [];
    for (var i=0;  i < promiseArray.length; i++) {
        promise = promise.then(function(){
            var derivedPromise = promiseArray[i].then(function(result) {
                //push data
                array.push(result.data);
            });
            //return promise to chain
            return derivedPromise;
        });
    };
    var finalPromise =  promise.then(function(){
        return array;
    });
    return finalPromise;
};

The example above initializes with an empty promise and progresses through a chain stemming from that initial promise. The final promise will result in the array generated by the chain.

Chaining promises

As the .then method of a promise generates a new derived promise, it is feasible to construct a series of promises. These chains can vary in length, and since a promise can resolve with another promise (thus deferring its resolution), it becomes viable to pause or defer the resolution of promises at any point within the chain. This functionality enables the implementation of robust APIs.

--AngularJS $q Service API Reference -- chaining promises

The sequential execution of promises is demonstrated in the example provided. For simultaneous execution of promises, consider utilizing the $q.all method.

Answer 9

Answer №5

The FindIdsRequests() function showcased does not contain any asynchronous elements in the code, making it suitable for a synchronous operation. Attempting to introduce promises into this function could unnecessarily complicate a straightforward task:

// Retrieve an array of unique identifiers (uid) from $scope.requests
function FindIdsRequests() {
    return $scope.requests.map(function(item) {
        return item.uid;
    });
});

$scope.ConfirmRequests = function() {
    var ids = FindIdsRequests();
    console.log('Array of IDs: ' + JSON.stringify(ids));
})

Answer 10

The FindIdsRequests() function showcased does not contain any asynchronous elements in the code, making it suitable for a synchronous operation. Attempting to introduce promises into this function could unnecessarily complicate a straightforward task:

// Retrieve an array of unique identifiers (uid) from $scope.requests
function FindIdsRequests() {
    return $scope.requests.map(function(item) {
        return item.uid;
    });
});

$scope.ConfirmRequests = function() {
    var ids = FindIdsRequests();
    console.log('Array of IDs: ' + JSON.stringify(ids));
})

Looping through an array of items in a for loop with a chain of

Answer №1

Answer №2

Answer №3

Answer №4

Creating a Chain of Promises from an Array of Promises

Chaining promises

Answer №5

Similar questions

Serve static files from parent directories using Express.js

Why is my model binding acting strangely?

"Utilize JavaScript to extract data from JSON and dynamically generate a

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Setting up Nginx to support html5mode in your web application involves making adjustments to the

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Creating a Python server for an Angularjs application and capturing user input

Utilize JQuery to modify hover state when focused and restrict tab navigation to specific areas on the keyboard

Detection of NTLM error during the parsing of the Authorization header

Creating a dropdown navigation menu using jQuery

The popover displays the text "[object Object]" when triggered by an ajax event

Issue with callback function not triggering after comment deletion in REACT

Navigate the div with arrow keys

Comparison of WebAPI Response Codes: Understanding the Difference Between 401 and

Incorporating Subtitles into Videos using NodeJS and the FFMpeg Fluent API

Express is encountering a non-executable MIME type of 'text/html' with Webpack

Having trouble getting the Babel plugin transform-remove-console to function properly with the Vue CLI 4 and @vue/cli-plugin-babel/preset?

What method can be used to incorporate Google Places API into a .js file without using a <script> element?

Error: The 'filename' property of undefined cannot be read when attempting to upload a user profile photo using multer

Implementing a scroll wheel type date and time picker similar to iOS in an Ionic1 app