Call multiple web api using Angular js one by one

Question

I have a scenario in which there is 8 web api's called as :

#1 
Sync Local DB from server DB (response will RETURN a List=> myList)         
If (myList.Length > 0)
#1.1 Call web Api to Insert/Update Local DB
#2 
Sync Server DB from Local DB  (Request goes with a List=> myList)
            If (myList.Length > 0)
#2.1 Call web Api to Insert/Update in Server DB (Response will RETURN a List=> newList)
If(newList.length > 0)
#2.2 Call web Api to Insert/Update in Local DB

I have two separate process For Head and Head Collection tables which synced with above process. So there is #3 and #4 scenario is also present.

I have call web api in the following manner...

syncHeadDataLogic();
syncHeadCollectionDataLogic();

I need that Head data should be synced first then HeadCollection data synced. But if there is no updated record for head then Head collection executed. In my scenario my web apis called in any order but i need a order as I have described above. Kindly suggest me how I achieved this.

#Updated

 //Sync  Head


        $scope.initializeController = function () {
            if ($scope.online) {
                //debugger;
                syncHeadDataLogic();
                syncHeadCollectionDataLogic();

            }
        };

        function syncHeadDataLogic() {
            HeadService.HeadSyncLocalDB(parseInt(localStorage.headRevision, 10), $scope.completeds, $scope.erroe);
        };

        $scope.SynServerDBCompleted = function (response) {
            debugger;
            $scope.HeadListForSync = response.HeadList;

            var tempHeadCurrencyDetail = [];
            if ($scope.HeadListForSync.length > 0) {

                angular.forEach($scope.HeadListForSync, function (xx) {
                    xx.CurrencyId = xx.CurrencyServerId;
                    xx.Id = xx.HeadServerId;
                    angular.forEach(xx.HeadCurrencyDetail, function (yy) {
                        yy.CurrencyId = yy.CurrencyServerId;
                        yy.HeadId = xx.HeadServerId;

                        if (yy.Revision == -1)
                            tempHeadCurrencyDetail.push(yy);
                    });
                    xx.HeadCurrencyDetail = tempHeadCurrencyDetail;
                });


                var postData = { Revision: parseInt(localStorage.headRevision, 10), HeadList: $scope.HeadListForSync };
                HeadService.SynServerDB(postData, $scope.completed, $scope.erroe);
            }
            else {
              //  alertsService.RenderSuccessMessage("There is no change in data after your last synchronization.");
            }


        };

        $scope.requestErrorwer = function (response) {
            debugger;
        };


        $scope.completed = function (response) {
            debugger;
            if (response.RevisionNo == localStorage.headRevision) {
                syncHeadCollectionDataLogic();
               // alertsService.RenderErrorMessage("There is newer version on the server. Please Sync from server first.", "MessageAlert");
            }
            else {
                syncData(response);
            }

        };
        $scope.completeds = function (response) {
            debugger;
            if (response.RevisionNo == localStorage.headRevision) {
                syncHeadCollectionDataLogic();
              //  alertsService.RenderSuccessMessage("You are already working on the latest version", "MessageAlert");
            }
            else {
                syncData(response);
            }

            //
            var request = new Object();
            HeadService.getAllHeadForRevision(request, $scope.SynServerDBCompleted, $scope.requestErrorwer);
        };
        $scope.erroe = function (response) {
            debugger;
           // alertsService.RenderErrorMessage("Data Synchronization Failed", "MessageAlert");
        };
        function syncData(data) {
            debugger;
            $scope.ReturnedRevisonNo = data.RevisionNo;
            if (data.HeadList && data.HeadList.length > 0) {
                var postData = { Revision: $scope.ReturnedRevisonNo, HeadList: data.HeadList, HeadRevision: $scope.ReturnedRevisonNo };
                HeadService.AddUpdateHeadAfterSync(postData, $scope.cmpSync, $scope.Error);
            }
            else {
                syncHeadCollectionDataLogic();
            }

        };
        $scope.cmpSync = function (response) {
            debugger;
            localStorage.headRevision = $scope.ReturnedRevisonNo;;
            alertsService.RenderSuccessMessage("The synchronization has been completed successfully.");
            syncHeadCollectionDataLogic();
        };

        $scope.Error = function (response) {
            debugger;
         //   alertsService.RenderErrorMessage(response.ReturnMessage);
         //   alertsService.SetValidationErrors($scope, response.ValidationErrors);
        };
        ////////////Sync End


        //Sync Head Collection


        function syncHeadCollectionDataLogic() {
            HeadService.HeadSyncLocalCollectionDB(parseInt(localStorage.headCollectionRevision, 10), $scope.completedCollections, $scope.erroeCollection);
        };


        $scope.SynServerDBCompletedCollection = function (response) {
            $scope.HeadCollectionListForSync = response.HeadCollectionList;
            if ($scope.HeadCollectionListForSync.length > 0) {
                angular.forEach($scope.HeadCollectionListForSync, function (value, index) {
                    value.Id = value.HeadCollectionServerId;
                    angular.forEach(value.HeadCollectionDetails, function (v) {
                        v.CommittedCurrencyId = v.CommittedCurrencyServerId;
                        v.HeadId = v.HeadServerId;
                        v.WeightId = v.WeightServerId;
                        v.HeadCollectionId = value.HeadCollectionServerId; //change

                        angular.forEach(v.HeadCollectionAmountDetails, function (xx) {
                            xx.CurrencyId = xx.CurrencyServerId;
                        });

                    });

                });
                var postData = { Revision: parseInt(localStorage.headCollectionRevision, 10), HeadCollectionList: $scope.HeadCollectionListForSync };
                HeadService.SynServerCollectionDB(postData, $scope.completedCollection, $scope.erroeCollection);
            }
            else {
               // alertsService.RenderSuccessMessage("There is no change in data after your last synchronization.");
            }


        };

        $scope.requestErrorwerCollection = function (response) {
        };


        $scope.completedCollection = function (response) {
            if (response.RevisionNo == localStorage.headCollectionRevision) {
               // alertsService.RenderErrorMessage("There is newer version on the server. Please Sync from server first.", "MessageAlert");
            }
            else {
                syncDataCollection(response);
            }

        };
        $scope.completedCollections = function (response) {
            if (response.RevisionNo == localStorage.headCollectionRevision) {
               // alertsService.RenderSuccessMessage("You are already working on the latest version", "MessageAlert");
            }
            else {
                syncDataCollection(response);
            }
            var request = new Object();
            HeadService.getAllHeadCollectionForRevision(request, $scope.SynServerDBCompletedCollection, $scope.requestErrorwerCollection);
        };
        $scope.erroeCollection = function (response) {
           // alertsService.RenderErrorMessage("Data Synchronization Failed", "MessageAlert");
        };
        function syncDataCollection(data) {
            $scope.ReturnedRevisonNo = data.RevisionNo;
            if (data.HeadCollectionList && data.HeadCollectionList.length > 0) {
                var postData = { Revision: $scope.ReturnedRevisonNo, HeadCollectionList: data.HeadCollectionList, HeadRevision: $scope.ReturnedRevisonNo };
                HeadService.AddUpdateaHeadCollectionAfterSync(postData, $scope.cmpSyncCollection, $scope.ErrorCollection);
            }
        };
        $scope.cmpSyncCollection = function (response) {
            localStorage.headCollectionRevision = $scope.ReturnedRevisonNo;;
            alertsService.RenderSuccessMessage("The synchronization has been completed successfully.");
            $scope.initializeController();
        };

        $scope.ErrorCollection = function (response) {
          //  alertsService.RenderErrorMessage(response.ReturnMessage);
          //  alertsService.SetValidationErrors($scope, response.ValidationErrors);
        }
        //End

nikjohn · Accepted Answer · 2016-10-06 05:47:53Z

0

I need that Head data should be synced first then HeadCollection data synced. But if there is no updated record for head then Head collection executed.

What you need is chained promises. Try this (I'm giving you pseudocode for now):

HeadService.HeadData
|-----------------|
                  HeadCollection(headDataResult)
                  |------------------|
                                     finalHandler(headCollectionResult)
                                     |------------------|




HeadService.HeadData()
    .then(HeadService.HeadCollection) // return or throw Err if headDataResult is empty
    .then(finalHandler);

Here, the order of execution of the promises will be predictable, and sequential. Also, each promise will be returned the resolved value of the previous promise

AngularJS as you can see in the documentation here, uses Promises out of the box with the $http injectable. You can define a factory like so:

// Factory code
.factory("SampleFactory", function SampleFactory($http) {
  var sampleFactoryObject = {};
  sampleFactoryObject.getSomething = function() {
    return $http.get('/someUrl');
  }
  sampleFactoryObject.getSomething.then(function resolveHandler(res) {
    return res;
  },
  function rejectHandler(err) {
    throw new Error(err);
  });
  sampleFactoryObject.getSomethingElse = function() {
    return $http.get('/someOtherUrl');
  }
  sampleFactoryObject.getSomethingElse.then(function resolveHandler(res) {
    return res;
  },
  function rejectHandler(err) {
    throw new Error(err);
  });
  return sampleFactoryObject;
});

// Controller code
.controller('myController', function myController(SampleFactory) {
  SampleFactory.getSomething()
    .then(SampleFactory.getSomethingElse())
    .then(finalHandler);

var finalHandler = function(resultOfGetSomethingElse) {
    console.log(resultOfGetSomethingElse);
  }
});

edited Oct 6, 2016 at 5:47

answered Oct 6, 2016 at 5:23

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coolForNet Over a year ago

I have used ajax get and post method. Here Head Collection is not dependent on Head. My need is that my 8 web apis should call one by one. I dont know about promises. Can you please give me an example how my 8 apis called one by one.

nikjohn Over a year ago

Answer udpdated

Collectives™ on Stack Overflow

Call multiple web api using Angular js one by one

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related