Cordova SQLite plugin promises javascript chain

Question

Hello guys so I'm trying to call 3 promises in one iteration then after they are done iterate one more time and call them one more time. Can anyone help me to solve this?

for(i=0;i<$scope.CurrentES.Issues.length;i++){
    app.Logger($scope.CurrentES.Issues[i])
    var promiseEvidence = $cordovaSQLite.execute(db, queryEvidence, [$scope.CurrentES.Issues[i].Evidence.Id]).then(function(result){
    app.Logger(result.rows.item(0).ImageID);
    app.Logger(result.rows.item(0).SupportingDocumetID);
    app.Logger(result.rows.item(0).QuoteID);
    var promiseImageLib = $cordovaSQLite.execute(db, queryImgLib, [result.rows.item(0).ImageID]).then(
        function (r) {
            if (r.rows.length != 0) {
                var img = r.rows.item(0);
                issue.Evidence.ImageLibary.Id = img.id;
                issue.Evidence.ImageLibary.ServerID = img.ServerID;
                issue.Evidence.ImageLibary.Conclude = img.Conclusion;
                issue.Evidence.ImageLibary.ImageTitle = img.Title;
                issue.Evidence.ImageLibary.Image = img.Image;
            }
        }, function (e) {
            app.Logger(e);
        });
        var promiseSupp = $cordovaSQLite.execute(db, querySupp, [result.rows.item(0).SupportingDocumetID]).then(
            function (r) {
                if (r.rows.length != 0) {
                    var sup = r.rows.item(0);
                    issue.Evidence.SupportingDocument.Id = sup.id;
                    issue.Evidence.SupportingDocument.ServerID = sup.ServerID;
                    issue.Evidence.SupportingDocument.Link = sup.Link;
                    issue.Evidence.SupportingDocument.Title = sup.Title;
                    issue.Evidence.SupportingDocument.Quoatation = sup.Extract;
                }
            }, function (e) {
                app.Logger(e);
            });
            var promiseQuote = $cordovaSQLite.execute(db, quesryQuote, [result.rows.item(0).QuoteID]).then(
                function (r) {
                    if (r.rows.length != 0) {
                        var quot = r.rows.item(0);
                        issue.Evidence.Quote.Id = quot.id;
                        issue.Evidence.Quote.ServerID = quot.ServerID;
                        issue.Evidence.Quote.Quoatation = quot.QuoteLegend;
                        issue.Evidence.Quote.Attributed = quot.QuoteText;
                    }
                }, function (e) {
                    app.Logger(e);
                });
                $q.all([promiseImageLib,promiseSupp,promiseQuote]).then(function(r){
            })
        });
        var isDone = $q.all([promiseEvidence]).then(function(r){

    })
}

Answer 1

A good way to think about this is that the construction of your promise chain is independent of their execution. Once you get that mental model in place, it's easy to reason about.

Let's break it down into steps and build up our code from there.

Execute asynchronous code and allow actions to happen after they are done:

function doSomeAsyncWork(){
   var promise1 = foo();
   var promise2 = bar();
   var promise3 = blah();

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

Repeat this code N number of times, but sequentially. After the first iteration has run.

function doWorkNTimes(n) {
 var lastPromise;

 for (var i = 0; i < n; i++) {
     //After initial promise, keep
     // chaining them together
     if (lastPromise) {
       lastPromise = lastPromise.then(function(items) {
         return doStuffAsync(i);
       });
     } else {
       lastPromise = doStuffAsync(i);
     }
 }

 return lastPromise;
};

Here is a working example that is slightly more sophisticated, but should demonstrate the point.

(function() {
  'use strict';

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  function promiseController($q, $timeout) {
    var vm = this;

    vm.results = [];

    vm.numTimes = 3;

    vm.isBusy = false;

    vm.isDone = true;

    vm.doWork = function(times) {
      vm.results.splice(0);
      vm.isBusy = true;
      vm.isDone = false;

      doWorkNTimes(vm.numTimes || 1)
        .finally(function() {
          vm.isBusy = false;
          vm.isDone = true;
        });
    };

    function doWorkNTimes(n) {
      var lastPromise;

      for (var i = 0; i < n; i++) {
        (function(i) {
          if (lastPromise) {
            lastPromise = lastPromise.then(function(items) {
              return doStuffAsync(i);
            });
          } else {
            lastPromise = doStuffAsync(i);
          }

          lastPromise.then(function(items) {
            //console.log(items);

            vm.results.push(items);
          });
        }(i));
      }

      return lastPromise;
    };

    function doStuffAsync(i) {
      var prom1 = createPromise(i),
        prom2 = createPromise(i),
        prom3 = createPromise(i);

      return $q.all([prom1, prom2, prom3]);
    }

    function createPromise(i) {
      var timeout = getRandomInt(200, 2000);

      return $timeout(function() {

        var item = {
          iteration: i,
          executionTime: timeout
        };

        //console.log(item);

        return item;

      }, timeout);
    }
  }

  angular.module('promise-sample', [])
    .controller('promiseController', promiseController);

}());

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script>

<div class="container" ng-app="promise-sample" ng-controller="promiseController as ctrl">
  <div class="row">
    <div class="col-xs-6">
      <div class="form-group">
        <label>Number of Iterations</label>
        <input type="number" class="form-control" min="0" max="10" ng-model="ctrl.numTimes" />
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-primary" ng-click="ctrl.doWork()">Run {{ctrl.numTimes}} Times</button>
      </div>
    </div>
    <div class="col-xs-6">
      <table class="table table-striped" ng-repeat="set in ctrl.results">
        <thead>
          <tr>
            <th>Run</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in set">
            <td>{{::item.iteration}}</td>
            <td>{{::item.executionTime}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>