(Angularjs) How to $http.get data and store it in service

Question

As you will see i'm new in AngularJS, JS and in web development at all =) really sorry for that but i try to. I try to build a massive webform (about 200 different fields) with AngularJS controllers. I need access from controller to root data source. AngularJS team ask do not make Services just for storing data, but i want to make service for load and save data (at start into .json files on a server). Service: ``` AppName.factory('MasterData', ['$rootScope', '$http', '$q', '$log', function($rootScope, $http, $q, $log) { var responseData; $http.get('/getdata.php').then(function (response) { responseData = response.data; console.log(response.data); }); return responseData; }]); ``` Controller: ``` AppName.controller('justController', ['$scope', 'MasterData', '$log', function ($scope, MasterData, $log) { $scope.data = MasterData.justControllerSectionData; console.log(MasterData); } ]); ``` Controller return undefined. But console.log from service returns the object. I feel that the probl…

Accepted Answer

Your code doesn't work, because the callback you supplied to `success()` in your service is called asynchronously; after your service has returned, that is:

The sequence is like this:

- The `function` in MasterData is run. The `$http.get` request is launched and attached the promise callback. `responseData` is referenced in this callback (aka. "closed over").

- The function returns from the service to your controller. `responseData` has not been set yet, which doesn't stop the parent scope function from returning.

- `$http.get` succeeds and `responseData` is set in the service however unreachable for the controller.

If the scoping of the nested function in `success()` is not clear to you, I'd recommend reading about closures in JavaScript (or even better, in general), for example here.

You can achieve your goal with a service like this:

```
function($q, $http, /* ... */) {    
    return {
        getData: function() {
            var defer = $q.defer();
            $http.get('/getdata.php', { cache: 'true'})
            .then(function(response) {
                defer.resolve(response);
            });

return defer.promise;
    };
}
```

The `$http` service will happily cache your response data, so you don't have to. Note that you need to retrieve the promise from your `defer`red object to make this work.

The controller is like this:

```
/* omitted */ function($scope, YourService) {
    YourService.getData().then(function(response) {
        $scope.data = response.data;
    });
}
```

Since success is depreciated, I modified success to then.

(Angularjs) How to $http.get data and store it in service

Solution

Problem

Related problems