Issue in storing angular js response in global variable

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.

Ram Vennam · Accepted Answer · 2015-04-22 02:43:46Z

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.

answered Apr 22, 2015 at 2:43

Ram Vennam

3,5461 gold badge14 silver badges19 bronze badges

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

1 Comment

Danny Over a year ago

Or in the view just display {{ details }} - they should be an empty array at first, and then fill in when the GET returns.

Hitesh Gaur · Accepted Answer · 2015-04-22 03:16:32Z

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();
    });
}());

Collectives™ on Stack Overflow

Issue in storing angular js response in global variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related