AngularJS Sequentially Chain Promises in forEach Loops

Question

I have been doing lots of searching trying to find a solution, and believe it ultimately comes down the the promise as my data is returned but all at the end, where as I need it

Answer 1

You can use $q.all to handle multiple asynchronous call. Once all promise done execute, loop through raw Http promise and then push the data to the new array

vm.reviewWeek = function () {

    //Array to be updated over each iteration and used in factory call
    var trackMenuIds = [];

    var dinnersPromise = [];

    vm.planWeek.dinner.forEach(function (day, ind) {
        //Adds two more items to day(current row) to pass to factory
        day.menuType = 'dinner';
        day.weekIds = trackMenuIds;
        dinnersPromise.push(menuFactory.matchMenuCriteria(day));
    });

    $q.all(dinnersPromise).then(function (arr) {
        angular.forEach(arr, function (response) {
            var randomItem = response.data[0];
            day.menuItem = {'_id': randomItem._id, 'name': randomItem.name};

            //adds the current id to the array to be used for the next run
            trackMenuIds.push(randomItem._id);
         });
    });
}