AngularJS $http return value

Question

I am new to AngularJS and only aware of the basics of AngularJS. I want to return a value from $http. That is $http should return a value to the global variable of My Application.

I have tried this:

var sessionValues = null;
var AdminController = angular.module('AdminController', []);

AdminController.controller('LoginController', ['$scope', '$http','$location',
function ($scope, $http, $location){
$http({
        method: "post",
        url: "API/MyPage.php",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        sessionValues = eval(data);
        console.log(sessionValues); /*Returns desired string*/
    }).error(function(){
        $scope.message="Some error has occured";
    });
    console.log(sessionValues); /*Returns null */
  }
]);

I tried using $rootScope, but was not successful.

I understand that this is because it is an asynchronous call, but how can I fetch the value in JS's global variable.?

Can anyone help me about this.?

@Veer: But...you are storing the value in JS's global variable. What is the problem ??? — gkalpak
– gkalpak, Commented Jul 6, 2014 at 13:25
@ExpertSystem: something is wrong with async calls. The value is not delivered to the JS global variable — Veer Shrivastav
– Veer Shrivastav, Commented Jul 6, 2014 at 13:46
@Veer: Nothing is wrong. You probably have some reading to do on async execution :) The asyncronicity of the $http call means that the global JS variable will be updated at a later time. You just happen to try to access it sooner. — gkalpak
– gkalpak, Commented Jul 6, 2014 at 14:05

Chandermani · Accepted Answer · 2014-07-06 12:59:27Z

6

The problem is indeed with the async nature of call and when you are trying to access the variable. console.log returns null because it gets called before the $http call is complete.

Firstly we do not pollute the JavaScript global scope, but use services\factory, $rootScope to access data.

In you case if you want to expose a variable to across angular, the easiest way is to use $rootScope. Something like this

AdminController.controller('LoginController', ['$scope','$http','$location','$rootScope'
  function ($scope, $http, $location,$rootScope){
  $http({
        method: "post",
        url: "API/MyPage.php",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        $rootScope.sessionValues = eval(data);
        console.log($rootScope.sessionValues); /*Returns desired string*/
    }).error(function(){
        $scope.message="Some error has occured";
    });
    console.log($rootScope.sessionValues); /*Returns will always null due to async nature call*/
  }
]);

You then have to access that variable only after it has been filled in the success call back, before that it would be always null. The console.log would always fail.

To know when the variable value has changed you can use AngularJS watch http://www.benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html

answered Jul 6, 2014 at 12:59

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V31 Over a year ago

Rootscope is not at all required when the conversation involves only one level of scope. Factoriy method is the appropriate choice

Chandermani Over a year ago

Scoping of services\factories and rootscope is similar. if the data is required in a single scope actually neither rootscope nor services\factory is required.

Community · Accepted Answer · 2017-05-23 10:32:22Z

1

I think what you want is to retrieve a constant from backend service before application loaded.

You can refer to How to retrieve constants for AngularJS from backend

In your controller, you can get the APP_CONFIG directly.

AdminController.controller('LoginController', ['$scope', '$http','$location','APP_CONFIG'
function ($scope, $http, $location, APP_CONFIG){
});

You can reuse APP_CONFIG at any angular controller, service or factory.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 6, 2014 at 13:18

hutingung

1,80016 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS $http return value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related