How can I wait in Angular JS till when my web service returns

Question

I have two calls to my web service and they will both populate two different sections of grid in the same page .

And I do not want to show the page until both the web service calls return .

Here is what it looks like :

in ABCCtrl.js ............

if (params) {
    //I set the please wait dialog on
    $scope.pleaseWait = { "display": "block" };


    //I hit the first service call and it will populate myFirstUIGrid
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) {
        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });

    //I hit the second service call and it will populate mySecondUIGrid
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) {
        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });

After both the grid populate only I want to set the please wait off and display the grids.

    $scope.toggleDetails = { "display": "block" };
    $scope.toggleHeader = { "display": "block" };
    $scope.pleaseWait = { "display": "none" };

Here is the page that holds two ui grids :

<div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController">
    <div ng-style="pleaseWait">
        <div class="refresh" style="width:100%;height:100px;">
            <h4>Please wait....</h4>
        </div>
    </div>
    <div ng-style="toggleDetails">
        <h3>Unmerge Request Log</h3>
        <div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
        </div>

        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
                            ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                            first-text="&laquo;" last-text="&raquo;">
            </uib-pagination>
        </div>
        <br/>
        <h3>Unmerge Process Log</h3>
        <div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
        </div>

        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
                            ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                            first-text="&laquo;" last-text="&raquo;">
            </uib-pagination>
        </div>

        <div style="margin-top:8px;">
            <button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()">Cancel</button>
        </div>
    </div>

</div>

Use defer from the underlying Q – Ali Gajani Apr 30 '16 at 00:26 — Ali Gajani, Apr 30 '16 at 00:26

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

You can use $q.all([ array of promises ]).then(...). check the docs

all(promises);

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

Edit: an example

var promises = [$timeout(angular.noop, 500), $timeout(angular.noop, 5000)];
$q.all(promises).then(function(results){
 //This will be executed when both promises fulfill - after 5000ms
 var promise1_result = results[0];
 var promise2_result = results[1];

 doStuff();
})

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 29 '16 at 17:00

Muli Yulzary

2,559
3
21
39

Can you give please an example using the data I have given ? – StrugglingCoder Apr 29 '16 at 17:31

score 1 · Answer 2 · answered Apr 29 '16 at 17:12

you can use ng-hide and ng-show for this

html:

<div ng-show='grid1 && grid2 '>grid1</div>

<div ng-show='grid1 && grid2 '>grid2</div>

<div ng-hide='grid1 && grid2 '>please wait</div>

js

if (params) {
    //I set the please wait dialog on
    $scope.pleaseWait = { "display": "block" };


    //I hit the first service call and it will populate myFirstUIGrid
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) {

        $scope.grid1 = true

        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });

    //I hit the second service call and it will populate mySecondUIGrid
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) {


        $scope.grid2 = true

        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });

Where are we setting the hide or show ? Please see the html that I have post in my question. — StrugglingCoder, Apr 29 '16 at 17:34
That's actually sweet but that does not show the `please wait div ` while waiting for results. Please see the updated question. — StrugglingCoder, Apr 29 '16 at 17:55
does `please wait div` show even without `ng-hide='grid1 && grid2 '` ?. i mean default it must be visible, check your css — aseferov, Apr 29 '16 at 17:59

kfreezen · Accepted Answer · 2016-04-29T18:22:09.733

You didn't provide HTML to go with your JS so I'll make some up for you.

I used $timeout in place of TransactionApiServices.getApiUnmergeRequestDetails but if you use the same idea I did in this jsfiddle, it should work.

HTML:

<body ng-app="MyApp" ng-controller="MyController">
    <div id="loading-overlay" ng-class="{ 'display': loading }">
        <div id="popup">
            Please Wait... <!-- any other styling you want goes on this popup. -->
        </div>
    </div>

    <div>
        {{data}}
    </div>
</body>

JS:

angular.module("MyApp", []);

angular.module("MyApp").controller("MyController", function ($scope, $timeout, $q) {
    $scope.data = "";

    var firstPromise = TransactionApiServices.getApiUnmergeProcessDetails(params).then(function() {
        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });

    var secondPromise = TransactionApiServices.getApiUnmergeRequestDetails(params).then(function() {
        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });

    $scope.loading = true;

    $q.all([firstPromise, secondPromise]).then(function () {
        $scope.loading = false;
    });
});

CSS:

#loading-overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-color: #000000;
  opacity: 0.5;
}

#loading-overlay.display {
  display: block !important;
}

#popup {
  margin: 0 auto;
  width:75%;
  margin-top: 100px;
  color: rgba(255, 255, 255, 1);
}

https://jsfiddle.net/kszat61j/ to see it in action.

It doesn't have so much going for the styling, but I think the general idea is what you want.

EDIT: Changed code to relate a little more clearly to your question. Hopefully this helps.

Actually I cant do that I guess. That call to `TransactionApiServices.getApiUnmergeRequestDetails(params)` calls another service that then calls the web service like ` var getApiUnmergeRequestData = function (param) { console.log("Type before sending"); var url = BasePath + 'TransactionNative/gettransunmergerequest/' + param["trans_key"];` ...... so is timeout an option ? — StrugglingCoder, Apr 29 '16 at 17:33
I was using $timeout as a replacement for that function since I didn't have access to your code. I updated my code, hopefully it's a little clearer. — kfreezen, Apr 29 '16 at 18:24

score 0 · Answer 4 · answered Apr 29 '16 at 17:17

Sweet and easy to understand You can use ng-hide or ng-show

myApp.controller('CheckServiceCtrl',function($scope){
   $scope.service1=false;
   $scope.service2=false;
   //after returning data from service1 set 
     $scope.service1=true;
    //after return data from service2 set 
     $scope.service2=true;
}

suppose you are displaying data in a 2 different divs and as per your requirement data should be shown only after completion of both services then you should declare div like.

<div  ng-controller="CheckServiceCtrl" >
    <div id="serivces" ng-show="service1 && service2">
       <div id="service1" >
         Display of service1
       </div>
       <div id="service2">
         Display of service2
       </div>
     </div>
    <div id=pleasewait" ng-hide="service1 && service2">
      Please Wait....
    </div>
 </div>

How can I wait in Angular JS till when my web service returns

4 Answers4