在全局变量中存储angular js响应的问题

Question

I am making an http call to my controller through angular.js and trying to store the response in one global variable like below.

app.controller('dashBoardController', ['$scope', '$http', '$location',
    function ($scope, $http, $location) {
        $scope.details = [];
        var init = function () {
            $http({
                method: 'GET',
                url: urlpath + '/values'
            }).success(function (response) {
                $scope.workouthistory = JSON.stringify(response);
                $scope.details = response;
                console.log($scope.details)
            });
        }
        init();

        alert($scope.details)
        ]);

But when I try to print the response that I stored globally in an array I am getting an blank response. But, the console inside the method prints the response correctly. Kindly, help me figure out how to store this response globally.

Answer 1

Your alert code runs before the function where you set the variable and have the console.log. The function inside your success() call is a callback function which runs when the http request comes back with a response.

You can try moving your alert message into a new global function, and then call that function inside your success callback.

Answer 2

First, going with good programming practice global variables in angular should be defined using services. Scope properties would not be accessible at other places. Second, these kind of tasks can be executed using promises, like below

(function () {
    var app = angular.module("myApp", []);

    app.constant("globalVariableSvc", { details: [] });

    app.controller("dashboardCtrl", function ($scope, $q, $http, $location, globalVariableSvc) {

        //creating a promise
        function getValues() {
            var dfd = $q.defer();
            $http.get(urlpath + '/values')
                .success(function (response) {
                    dfd.resolve(response);
                })
                .error(function (response) {
                    dfd.reject(response);
                });
            return dfd.promise;
        }

        function init() {
            globalVariableSvc.details = [];

            //using promise
            getValues()
                .then(function (response) {

                    // when promise is being resolved or it has succeeded to perform the task
                    $scope.workouthistory = JSON.stringify(response);
                    globalVariableSvc.details = response;
                    console.log(globalVariableSvc.details)
                    alert(globalVariableSvc.details);

                }, function (response) {
                    // when promise is being rejected or it has failed to perform the task
                    alert(globalVariableSvc.details);
                });
        }

        init();
    });
}());