CODEWITHSUNDEEP
javascripthtmlangularjs
andrzej541
andrzej541

Reputation: 961

AngularJS delay view display

My controller fetch data from two external JSON files, filter it and then should render on the view. But whole operation take some time (approximately 30 mil sec) and view is loaded first. So data cannot be found by HTML code.

How can I delay loading of my view in order to load data from controller first? Or maybe there is another solution?

$scope.ratePlansRelated = [];

$http.get('rooms.json').then(function(res){
    $scope.rooms = res.data;
});

$http.get('ratePlans.json').then(function(res){
    $scope.ratePlans = res.data;
});

// delay calling that function in order to load data from json first
setTimeout(assignRatePlans,25);


function assignRatePlans()
{
    //filter data and assing it to $scope.ratePlansRelated here

}

Upvotes: 0

Views: 149

Answers (2)

charlietfl
charlietfl

Reputation: 171669

Can use $q.all() which doesn't resolve until all of the input promises are resolved

var req1 = $http.get('ratePlans.json').then(function(res){
    $scope.ratePlans = res.data;    
});    

var req2 = $http.get('rooms.json').then(function(res){
    $scope.rooms = res.data;    
});

$q.all([req1, req2])
  .then(assignRatePlans)
  .catch(function(err){
      // do something if either request fails
  });

Note: Remember to inject $q service

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

Call assignRatePlans() on the success of the $http

Try this

$scope.ratePlansRelated = [];
var  ratePlansDone = false;
var  roomsDone = false;


$http.get('ratePlans.json').then(function(res){
    $scope.ratePlans = res.data;
    ratePlansDone = true;
    if (roomsDone) {
        assignRatePlans();
    }
});


$http.get('rooms.json').then(function(res){
    $scope.rooms = res.data;
    roomsDone = true;
    if (ratePlansDone) {
        assignRatePlans();
    }
});



function assignRatePlans()
{
    //filter data and assing it to $scope.ratePlansRelated here

}

Upvotes: 0

Related Questions