2
$scope.tempObject = {};

 $http({
   method: 'GET',
   url: '/myRestUrl'
}).then(function successCallback(response) {
   $scope.tempObject = response
   console.log("Temp Object in successCallback ", $scope.tempObject);
}, function errorCallback(response) {

});
console.log("Temp Object outside $http ", $scope.tempObject);

I am getting response in successCallback but not getting $scope.tempObject outside $http. its showing undefined.

How to access response or $scope.tempObject after $http

georgeawg
  • 48,608
  • 13
  • 72
  • 95
ojus kulkarni
  • 1,877
  • 3
  • 25
  • 41
  • 1
    $http get is an async call. The time your console.log outside the success callback executes, success callback is not executed. That's why $scope.tempObject is undefined. – varun Feb 08 '16 at 17:23
  • But if I want to use `$scope.tempObject` after callback so how can I use it. ? – ojus kulkarni Feb 08 '16 at 17:27
  • I recommend to learn about Promises. This article will help you to understand how it's works - http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html – valverde93 Feb 08 '16 at 17:28
  • You can do the stuff inside callback function. Why do you need $scope.tempObject outside? – varun Feb 08 '16 at 17:29
  • @varun I have some data outside, so I want to use that data with success callback `response` outside this function – ojus kulkarni Feb 08 '16 at 17:35
  • Could you put the some more code or create a fiddle? I am not clear with the actual problem – varun Feb 08 '16 at 17:39

3 Answers3

5

But if I want to use $scope.tempObject after callback so how can I use it. ?

You need to chain from the httpPromise. Save the httpPromise and return the value to the onFullfilled handler function.

//save httpPromise for chaining
var httpPromise = $http({
   method: 'GET',
   url: '/myRestUrl'
}).then(function onFulfilledHandler(response) {

   $scope.tempObject = response

   console.log("Temp Object in successCallback ", $scope.tempObject);

   //return object for chaining
   return $scope.tempObject;

});

Then outside you chain from the httpPromise.

httpPromise.then (function (tempObject) {
    console.log("Temp Object outside $http ", tempObject);
});

For more information, see AngularJS $q Service API Reference -- chaining promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.1

Explaination of Promise-Based Asynchronous Operations

console.log("Part1");
console.log("Part2");
var promise = $http.get(url);
promise.then(function successHandler(response){
    console.log("Part3");
});
console.log("Part4");

pic

The console log for "Part4" doesn't have to wait for the data to come back from the server. It executes immediately after the XHR starts. The console log for "Part3" is inside a success handler function that is held by the $q service and invoked after data has arrived from the server and the XHR completes.

Demo

console.log("Part 1");
console.log("Part 2");
var promise = new Promise(r=>r());
promise.then(function() {
    console.log("Part 3");
});
console.log("Part *4*");

Additional Resources

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • `$q` helps me. I used `return $q(function ( resolve, reject ) { ... } )` then I resolve successCallback object. so its working – ojus kulkarni Feb 09 '16 at 05:58
  • 2
    There is need to use `$q( (resolve, reject) => { } )` as the $http service already returns a promise. Doing so is error prone and considered an [anti-pattern](http://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it). – georgeawg Mar 17 '17 at 00:41
  • That means if we use `$timeout` function with some delay then also it will fetch complete data.for exmple - `$timeout(function () { console.log("Temp Object outside $http ", $scope.tempObject); }, 1000)` – ojus kulkarni Apr 25 '17 at 06:36
0

$http call is async call. The callback function executes when it has returned a response. Meanwhile the rest of the function keeps executing and logs $scope.tempObject as {}. When the $http is resolved then only $scope.tempObject is set. Angular will bind the changed value automatically using two way binding.

{{tempObject}} in the view will update itself.

if you want to use tempObject after callback then do this

then(function(data){
   onSuccess(data);
},function(){

});

function onSuccess(data){
// do something
}
Amit Dhaka
  • 178
  • 4
0

Try to use a $scope.$apply before to finish the successCallback function. An other solution is to change successCallback -> function so:

$http({ method: 'GET', url: '/myRestUrl' }).then(function(success) { $scope.tempObject = success; console.log("Temp Object in successCallback ", $scope.tempObject); }, function(error) { });
Compa88
  • 31
  • 2
  • `$apply` is not helpful here. because its not the problem of any view or scope. problem is basically I want access of response outside – ojus kulkarni Feb 08 '16 at 17:43
  • I used `$watch` in my success callback, but it does't reflect any value outside. and main thing is there is no need of watch because I am getting response properly – ojus kulkarni Feb 08 '16 at 17:49
  • You try to set the success function similar my post? – Compa88 Feb 08 '16 at 17:55