Looping through Angular promises sequentially

Question

Looping through Angular promises sequentially

I am faced with a dataset consisting of the following information.

 $scope.orders = [
        { material: 'A', quantity: 32, orderNumber: 'dummy'},
        { material: 'A', quantity: 65, orderNumber: 'dummy'},
        { material: 'A', quantity: 86, orderNumber: 'dummy'},

        { material: 'B', quantity: 45, orderNumber: 'dummy'},
        { material: 'B', quantity: 68, orderNumber: 'dummy'},
        { material: 'B', quantity: 15, orderNumber: 'dummy'},

        { material: 'C', quantity: 11, orderNumber: 'dummy'}
    ];

The challenge I am facing is processing (createOrder) these orders grouped by their respective materials. Once all the orders for a particular material have been processed, I need to trigger another function (materialRun) that executes a material run. This needs to be done sequentially as the backend system cannot handle parallel processing.

I envision the process to flow like this:

Material A: Order 1 -> Order 2 -> Order 3 -> Material Run

Once the Material Run for A is complete, move on to Material B

Material B: Order 1 -> Order 2 -> Order 3 -> Material Run

Once the Material Run for B is complete, proceed to Material C

...and so on

Furthermore, I require the output from each createOrder operation to update the orders list dynamically.

Currently, I am utilizing angular promises, but I am open to alternative approaches and suggestions. For reference, you can view an example in this fiddle: http://jsfiddle.net/a1sp0ye2/

javascript angularjs promise angular-promise

Answer 1

Answer №1

Here is a method for looping through items asynchronously when each iteration depends on the completion of an asynchronous task. This template is specifically designed for promises in Angular, but can be adapted for use with any promises implementation:

/**
 * Perform asynchronous looping through an array.
 *
 * @param items - Array to iterate
 * @param doLoopBody - Callback function to execute for each iteration, returns a promise
 */
function asyncLoop(items, doLoopBody) {
    var i = 0, d = $q.defer();

    nextIteration();

    return d.promise;

    function nextIteration() {
        if( i < items.length ) {
            doLoopBody(items[i], i, items).then(
                function() {
                    i++;
                    nextIteration();
                },
                onError
            );
        }
        else {
            d.resolve();
        }
    }

    function onError(reason) {
        d.reject(reason);
    }
}

You can view a basic implementation based on this approach here (check the browser's console for output).

Answer 2

Here is a method for looping through items asynchronously when each iteration depends on the completion of an asynchronous task. This template is specifically designed for promises in Angular, but can be adapted for use with any promises implementation:

/**
 * Perform asynchronous looping through an array.
 *
 * @param items - Array to iterate
 * @param doLoopBody - Callback function to execute for each iteration, returns a promise
 */
function asyncLoop(items, doLoopBody) {
    var i = 0, d = $q.defer();

    nextIteration();

    return d.promise;

    function nextIteration() {
        if( i < items.length ) {
            doLoopBody(items[i], i, items).then(
                function() {
                    i++;
                    nextIteration();
                },
                onError
            );
        }
        else {
            d.resolve();
        }
    }

    function onError(reason) {
        d.reject(reason);
    }
}

You can view a basic implementation based on this approach here (check the browser's console for output).

Answer 3

Answer №2

Although I'm not entirely certain if this will solve your issue, you can give my code a try:jsfiddle

        $scope.promises = [];
        ordersByMaterial.forEach(function(order) {
            $scope.promises.push(createOrder(order));
        });

I decided to test it out by creating $scope.logsCreateValue = []; and storing random values using Math.floor(Math.random() * 10); Make sure to check the output in the

console.log($scope.logsCreateValue);

, it should correlate with the values set by

$scope.orders[key].orderNumber = res[key].orderNumber;

Answer 4

Although I'm not entirely certain if this will solve your issue, you can give my code a try:jsfiddle

        $scope.promises = [];
        ordersByMaterial.forEach(function(order) {
            $scope.promises.push(createOrder(order));
        });

I decided to test it out by creating $scope.logsCreateValue = []; and storing random values using Math.floor(Math.random() * 10); Make sure to check the output in the

console.log($scope.logsCreateValue);

, it should correlate with the values set by

$scope.orders[key].orderNumber = res[key].orderNumber;

Looping through Angular promises sequentially

Answer №1

Answer №2

Similar questions

Storing Data in Session Storage Post Page Redirection (utilizing AngularJS Routing)

When $(.class) displays result, Javascript ceases execution

Managing API calls through Next.js routing

A guide on using Sinon to mock a custom $http transform

Error in HTML: The AgGrid component is missing the required 'col' attribute

Tips for handling catch errors in fetch POST requests in React Native

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible

Leverage jQuery to Retrieve Text and Modify

Looking to streamline a JavaScript function, while also incorporating jQuery techniques

Combining Vue.js with Laravel Blade

"Oops! Vite seems to be facing an issue as RefreshRuntime.injectIntoGlobalHook function is

Execute asynchronous functions without pausing the thread using the await keyword

Receiving a k6 response that includes a JSON object with a lengthy integer value

Upon pressing enter in the input box, the page will redirect to localhost:3000/

Determine image size (pre-upload)

Nesting / Mulled / JS - Uploading Files - Form's end is unexpectedly reached

Switching out the background image with a higher resolution one specifically for users with retina devices

Ensure that each child component receives a prop

What are the best methods for profiling a Node.js application at a specific point in its execution?

The view displays a true boolean value, while the controller is returning a false boolean value in