then function not returning values Angular js

Question

I'm doing something with Chart.js. I am using this function ($scope.getAreas) to get the information to build the charts. When I print the variables ($scope.AreasInteres) outside the "then" function it returns "undefined".

var app = angular.module('App', ["chart.js"]);

app.controller('chartsCtrl', function($http, $scope) {
   var vt = this;
   vt.chartPieLabels = ["Revistas", "Libros", "Internet", "Otros"];
   vt.chartPieCharts = [152, 51, 68, 210];
   vt.chartPieOptions = {
      maintainAspectRatio: true,
      responsive: true
   };
   vt.chartPieColours =['#494750', '#999999', '#cc3321', '#2fb467'];

   $scope.AreasInteres;

   $scope.getAreas = function(){
      $http({
          url: 'contarAreasInteres/',
          method: 'GET'
      }).then(function (response) {
          $scope.AreasInteres = response.data;
          console.log($scope.AreasInteres);
      }); 
      console.log($scope.AreasInteres);
   };

   $scope.getAreas();

});

I've been using the same way to get things from REST in the same project and I didn't have problems. Thanks in advance.

score 0 · Answer 1 · answered Aug 07 '17 at 00:59

The .then function returns a promise, meaning that it waits for async tasks to be finished and executes it's callback function when it's done. It still continues to execute further code down the road.

Angulars $http service returns a promise which gets resolved when the async call to contarAreasInteres is done or fails due to an error. So it makes sense that outside of .then your console.log prints undefined because there was yet no data received.

Here is an explanation why promises are important and how they work.

then function not returning values Angular js

1 Answers1