0

i am trying to get response of post/get requests , getting response successfully inside post/get,but unable to get result out of post/get . when i print on console it is showing "undefined". any suggestions , here is my code

index.html:

<div ng-app="myApp" ng-controller="customersCtrl">{{ponies}}</div>

Angular code:

var myApp = angular.module('myApp', []);

angular service:

myApp.factory('ponyService', function($http) {
  var getPonies = function() {
    return $http.get('https://www.w3schools.com/angular/customers.php');
  };

  return {
    getPonies: getPonies
  };
});


myApp.controller('customersCtrl', function($scope, ponyService) {

ponyService.getPonies().success(function(data) {
    $scope.ponies = data;
  });
console.log($scope.ponies); // here want to print data because want to use whole controller

});

suresh s
  • 3
  • 5
  • [It's not possible.](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) The statements outside of `.success()` will always be evaluated before `data` exists. – Can you possibly elaborate on why you want `$scope.ponies` to be available there and how that allows you "*to use whole controller*?" We may be able to offer an alternate approach with some additional details. – Jonathan Lonowski Mar 08 '17 at 06:57

2 Answers2

1

That's because posts and gets are asynchronous.

Your console.log won't wait for the response.

Put your console inside success in order check it's data.

Try like this

ponyService.getPonies().success(function(data) {
    $scope.ponies = data;
    console.log($scope.ponies); 
  });

or you can watch it's changes (but it's not recommended just for test purposes),

Like this 

ponyService.getPonies().success(function(data) {
    $scope.ponies = data;
  });

$scope.$watch("ponies",function(val){
  if(val)
    console.log(val)
})
Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80
  • want to assign that result vaue to one variable how can i do? because want to use over all controller that variable – suresh s Mar 08 '17 at 07:03
  • used your code , here when load page getting undefined after that getting data , is it possible to overcome undefined first time @Anik – suresh s Mar 08 '17 at 07:06
0

It is because a $http returns a promise (async request) so if you did something like this

ponyService.getPonies().success(function(data) {
    $scope.ponies = data;
  });
console.log($scope.ponies);

it will log undefined, as you are trying to log it before the request is finished.So you need to chain to that promise in any code that needs to access the resolved data.Like:

ponyService.getPonies().success(function(data) {
     $scope.ponies = data;
     console.log($scope.ponies);
     /* access data or $scope.ponies in here */
  });

or you can use promise like

  ponyService.getPonies().then(function (data) {
     $scope.ponies = data;
     console.log($scope.ponies);
    /* access data or $scope.data in here */
  });
Suyog K.C
  • 682
  • 9
  • 20