not getting data from $http from service to scope

Question

we are trying to get data from service agrService with $http its working but when i reccive data to controller i am not able to access it outside that function

$scope.resource return data inside function but not outside please help.

var app = angular.module('app', ['ui.router','ngTasty']);
app.config(['$urlRouterProvider', '$stateProvider',function($urlRouterProvider, $stateProvider, $routeProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'templates/home.html',
            controller: function($scope, $http, $location, agrService) {
                agrService.bannerSlides().then(function(data) {
                    //its working here                       
                   $scope.resource = data;
                }, function(error) {
                    // do something else
                });

I NEED TO ACCCESS DATA HERE CAN ANY BODY HELP

               console.log($scope.resource);
            }
        });
}]);
app.service('agrService', function($q, $http) {this.bannerSlides = function() {
        var dataUrl = 'http://WWW.EXP.COM/codeIgniter_ver/main/home';
        var ret = $q.defer();
        $http({
                method: 'GET',
                dataType: "json",
                url: dataUrl
            })
            .success(function(data, status, headers, config) {
                ret.resolve(data);
            }).error(function(data, status, headers, config) {
                ret.reject("Niente, Nada, Caput");
            });
        return ret.promise;
    };
});

score 0 · Answer 1 · answered Dec 21 '14 at 10:34

0

My suggestion would be to rethink the logic a bit. You want to do something with the data after you receive it, so why not make a function that you call once the data is received?

answered Dec 21 '14 at 10:34

juunas

54,244
13
113
149

score 0 · Answer 2 · edited May 23 '17 at 10:33

You'll never be able to access the resource data in that console log, simply because $http is an async call, and no matter if you return a promise or not, it's simply not ready at that point.

However, if you use it in a template or elsewhere that uses angular's double binding, it will work just fine.

To fix your issue, you can define a function with what happens after that service call and simply call it from the success callback:

agrService.bannerSlides().then(function(data) {
                //its working here                       
               $scope.resource = data;
               myAfterFunction();   // <--- here
            }, function(error) {
                // do something else
            });

and the function can be:

function myAfterFunction() {
    console.log($scope.resource);
}

And btw. your service is an example of deferred antipattern, you can simply do this:

app.service('agrService', function($q, $http) {this.bannerSlides = function() {
        var dataUrl = 'http://WWW.EXP.COM/codeIgniter_ver/main/home';
        return $http({
                method: 'GET',
                dataType: "json",
                url: dataUrl
            })
    };
});

not getting data from $http from service to scope

2 Answers2