How can I prevent angular from rendering the page until all data is displayed?

username

I have the following problem: I am trying to "merge" data from two collections from MongoDB. Everything looks fine until I try to display some data from the second query after the first:

$scope.getData = function() {
 var pipeline, fromDateRangeStatement, toDateRangeStatement, service, joblist;
 service = ($scope.service && $scope.service.value) ? $scope.service.value : {
     $exists: true
 };
 pipeline = $scope.utils.getSessionUsersPipeline($scope.fromDate, $scope.toDate,
     $scope.checkedResults, $scope.checkedStatuses, service, $stateParams, $scope.usersLimit);
 toApi.post("/users/aggregate", {
     pipeline: pipeline
 }).success(function(data) {
     $scope.users = data.data.result;
     for (var i = 0; i < $scope.users.length; i++) {
         var path = "/jobs/" + scope.users[i].id + "/sessions";
         var user = $scope.users[i]
         toApi.get(path).success(function(data) {
             user.error = data.data.records[0].exception // this is not shows up in HTML!
             console.log(data.data.records[0].exception); // but it can be logged!
         })
     }
 })

};

So, the problem: $scope.userson my page renders while their properties errordon't. The data seems to be rendered before I change the property for each user in the for loop. How to deal with it? thanks

C14L

Here are two different solutions

Each of your GET requests are asynchronous, so you need to wait for them all to resolve. You can wrap each request in its own Promise and collect all Promises like this

var promises = [];
for (var i = 0; i < $scope.users.length; i++) {
  promises[i] = new Promise(function (resolve, reject) {
    var path = "/jobs/" + scope.users[i].id + "/sessions";
    var user = $scope.users[i]
    toApi.get(path).success(function(data){
      user.error = data.data.records[0].exception;
      console.log(data.data.records[0].exception);
      resolve(user);
  })
}

Then use Promise.all() to group all promises into one Promise and wait for it to resolve.

Promise.all(promises).then(function(users) { 
  $scope.users = users;
});

Quick example : http://codepen.io/C14L/pen/QNmQoN

A simpler and better solution, though, is to show users one by one when their API call returns

for (var i = 0; i < $scope.users.length; i++) {
  var path = "/jobs/" + $scope.users[i].id + "/sessions";
  toApi.get(path).success(function (data) {
      $scope.users[i].error = data.data.records[0].exception;
      $scope.users[i].done = true;
      console.log(data.data.records[0].exception);
  });
}

Just add it in the template $scope.users[i].done = trueand use to display the dataset ng-show="user.done".

Related

How can I prevent CSS rendering from blocking my site?

Fire Phoenix I'm trying to optimize the loading speed of a mobile web page, for this I'm using this site: https://developers.google.com/speed/pagespeed/insights The site evaluated my resources and told me where I could improve. On my website I downloaded a fon

How can I prevent CSS rendering from blocking my site?

Fire Phoenix I'm trying to optimize the loading speed of a mobile web page, for this I'm using this site: https://developers.google.com/speed/pagespeed/insights The site evaluated my resources and told me where I could improve. On my website I downloaded a fon

How can I prevent the component from re-rendering? (with MWE)

gbewothcc How can I prevent a component from re-rendering without changing its props ? Code sandbox link/minimal working example . Move the cursor over Canvasand you can see that the console logs a number of "Canvas re-rendered"messages. At the top level, I pa

How can I prevent CSS rendering from blocking my site?

Fire Phoenix I'm trying to optimize the loading speed of a mobile web page, for this I'm using this site: https://developers.google.com/speed/pagespeed/insights The site evaluated my resources and told me where I could improve. On my website I downloaded a fon

How can I prevent the menu from showing until it is fully loaded?

username Good evening, is there a way to prevent all elements from showing in a nested side menu after a click or refresh. What I need is to show the element only in the menu or submenu that I click? Website: link . thank you very much. jQuery： if (window.loca

How to delay page rendering until data is received from api

Fossoni When the page loads for the first time using the API request, it errors out. But after the page loads, if I put back the same code, it works fine. Can someone help me what I am missing here. Or tell me a trick to delay page load until data is loaded fr

How can I prevent the menu from showing until it is fully loaded?

username Good evening, is there a way to prevent all elements from showing in a nested side menu after a click or refresh. What I need is to show the element only in the menu or submenu that I click? Website: link . thank you very much. jQuery： if (window.loca