angularjs Variable cannot be accessed out side function call

Question

Recently I started learning AngularJS. My problem is as follows. I cannot access the data returned by $http.get() out side the method call.

Code :

(function(){
    var productApp = angular.module('productApp', []);

    productApp.controller('ProductController', ['$http', function($http){
        var store = this;
        store.products = [];

        $http.get('http://localhost:8080/VeggieFresh/veggie/product/1')
        .success(function(data){
            store.products = data;
            console.log(data);
        });
        console.log(store.products);
    }]);

})();

When I print data inside $http.get() method, it could be printed without any problem, but when i try to print it outside method; it displays empty array.

I guess because of this I cannot access this data on HTML as well. Any help in this regards is highly appreciated.

A.B · Accepted Answer · 2014-10-26 12:38:54Z

1

Since $http success is a asynchronous call you wont get data immediately outside the function you can call a function for "success" function , or use a callback function

As far as your code is concerned, you can save data on $scope variable

  $http.get('http://localhost:8080/VeggieFresh/veggie/product/1')
    .success(function(data){
        $scope.store.products = data;
        //console.log(data);
    });

answered Oct 26, 2014 at 12:38

A.B

20.5k3 gold badges43 silver badges74 bronze badges

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

Comments

Rodrigo GdeA · Accepted Answer · 2014-10-26 12:44:05Z

0

The success function runs async, so you will get the result inside success function.

answered Oct 26, 2014 at 12:44

Rodrigo GdeA

111 bronze badge

Comments

Swap · Accepted Answer · 2014-10-27 13:52:47Z

0

Following code worked for me.

productApp.controller('ProductController', ['$http', function($http){
        var store = this;
        store.products = [];

        var promise = $http.get('http://localhost:8080/VeggieFresh/veggie/product/1');
        promise.success(function(data){
            store.products = data;
        });
}]);

answered Oct 27, 2014 at 13:52

Swap

31 silver badge5 bronze badges

Collectives™ on Stack Overflow

angularjs Variable cannot be accessed out side function call

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related