-3

I've a controller, where the flow should go sequentially. I'm making an $http GET request, and it should wait for getting the response and then it should go forward. Rather it completes the flow, and at the end it gets the response. How can I stop it?

Here is the code 

function CarouselDemoCtrl($scope,$http) {
    $scope.slides = [];
    console.log("1")
    $http.get('data.json').
       then(function(response) {
       $scope.slides = response.data.slides;
       console.log("done");
    });
    console.log("2");
}

It prints "1,2 and then "done". Where it should follow as "1,done and 2"

The code snippet is like this 

  function CarouselDemoCtrl($scope,$http) {
    $scope.slides = [];
    console.log("1");
    $http.get('data.json').
      then(function(response) {
       $scope.slides = response.data.slides;
      console.log("done");
    });


    $scope.myInterval = 7000;

    console.log($scope.slides);

   var i, first = [],second, third;
   var many = 1;

   //##################################################    
//Need to be changed to update the carousel since the resolution changed
$scope.displayMode = "tablet";
//##################################################
if ($scope.displayMode == "mobile") {many = 1;}
else if ($scope.displayMode == "tablet") {many = 2;} 
else {many = 3;}
for (i = 0; i < $scope.slides.length; i += many) {
  second = {
    image1: $scope.slides[i]
  };

  if (many == 1) {}
  if ($scope.slides[i + 1] && (many == 2 || many == 3)) {
       second.image2 = $scope.slides[i + 1];

      }
      if ($scope.slides[i + (many - 1)] && many == 3) {
        second.image3 = $scope.slides[i + 2];
     }
     first.push(second);
   }
    $scope.groupedSlides = first;
}
Syed
  • 2,471
  • 10
  • 49
  • 89
  • It should print 1,2 and then indeed done. A promise is asynchronously executed code while you expect it to be run synchronously. – skubski Feb 15 '16 at 11:40
  • Put your `2` into the `.then` callback...!? This is how asynchronous execution works. You can work *with* it, you can't work against it. – deceze Feb 15 '16 at 11:40
  • @deceze thanks for your input. But however thats my scenario. How can I fix my issue? – Syed Feb 15 '16 at 11:43
  • You can't. This code is not going to work as you expect, period. Use the callback Luke, use the callback! – deceze Feb 15 '16 at 11:44
  • Because I'm going to use "$scope.slides" after $http gets response. As the response is not yet received, I'm getting null value in it. – Syed Feb 15 '16 at 11:45
  • Use. The. Callback. That's what it's for. – deceze Feb 15 '16 at 11:45
  • You can resolve a promise before a view is shown... no callback needed. – skubski Feb 15 '16 at 11:46
  • Can you please provide me an example? – Syed Feb 15 '16 at 11:47
  • Simply put whatever code you want to execute **inside `.then` after `console.log('done')`.** It's that simple. – deceze Feb 15 '16 at 11:49
  • You can for example use the resolve functionality in ui-router. https://github.com/angular-ui/ui-router/wiki This is basically what you need. – skubski Feb 15 '16 at 11:50
  • Ah.. I got your point. – Syed Feb 15 '16 at 11:50

1 Answers1

0

if you want to print 2 after the done then you need for your api call to finish. You can detect that when control comes to the then callback. Thus you will have to print 2 inside your success callback.

function CarouselDemoCtrl($scope,$http) {
$scope.slides = [];
console.log("1")
$http.get('data.json').
   then(function(response) {
   $scope.slides = response.data.slides;
   console.log("done");
   //calling it after the done
   console.log("2");
});

}

ashfaq.p
  • 5,379
  • 21
  • 35
  • No. I want it outside itself. Because outside the $http call back, I'm using $scope.slides. There its coming as null as still the response is not yet received. – Syed Feb 15 '16 at 11:44
  • That is not possible my friend. this is what asynchronous behaviour is. – ashfaq.p Feb 15 '16 at 11:47
  • I understood Ashfaq. But, that's my scenario. – Syed Feb 15 '16 at 11:47