0

I created a simple AngularJS service with .factory() called $getUser that gets data from users.json:

{
    "john": {
        "name": "John",
        "address": "New York"
    },

    "bob": {
        "name": "Bob",
        "address": "Boston"
    }
}

Now I want to use this data in mainController:

angular.module('myApp', [])

.factory('$getUser', ['$http', function($http){
    var users = {};

    $http.get('users.json').then(
        function(response) {
            users.data = response.data;
        }
    );

    return users;
}])

.controller('mainController', ['$getUser', function($getUser){

    // I can access whole $getUser object
    console.log($getUser);

    // but when I want to access $getUser.data it gives me 'undefined'
    console.log($getUser.data);

}]);

When I want to console whole $getUser object, it works, but I am not able to access $getUser.data property. Why?

Erazihel
  • 7,295
  • 6
  • 30
  • 53
korwin
  • 31
  • 3
  • In my guess, you don't need to use `data` object. because may be your factory have not data object. – Ramesh Rajendran Aug 17 '17 at 09:21
  • 2
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Erazihel Aug 17 '17 at 09:22
  • Possible duplicate of [How does asynchronous call work in AngularJS 1.X? $Http call not returning value](https://stackoverflow.com/questions/31548385/how-does-asynchronous-call-work-in-angularjs-1-x-http-call-not-returning-value) – Ramesh Rajendran Aug 17 '17 at 09:25

2 Answers2

1

Create factory as:

app.factory('$getUser', ['$http',  function($http) {

  var factory = {               
    query: function () {                
       return $http.get('users.json').then(function (response) {
          return response.data;                            
               }, function (result) {
                   alert("Error: No data returned");
              });             
            }
       }       
        return factory;
}]);

So you can call it as:

$scope.data = $getUser.query()

Simple demo Fiddle

However I suggest to return promise and resolve it in controller

The common approach to load JSON is:

app.factory('Items', ['$http',
    function($http) {

        return {
            getJson: function(url) {
                var ItemsJson = $http.get(url).then(function(response) {
                    return response.data;
                });
                return ItemsJson;
            }
        }
    }
]);

and Usage:

 var jsonPromise = Items.getJson('jsonData/someJSON.json');
 jsonPromise.then(function (_response) {
 // ...
 }, function (error) {
     console.error(error);
 });
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
0

try this:

 angular.module('myApp', [])

    .factory('$getUser', ['$http', function($http) {
      var users = {};
      return {
        getData: function() {
          return $http({
            url: 'users.json',
            method: 'GET'
          })
        }
      }
    }])

    .controller('mainController', ['$getUser', function($getUser) {

      // I can access whole $getUser object
      console.log($getUser);

      // but when I want to access $getUser.data it gives me 'undefined'
      console.log($getUser.data);
      $getUser.getData().then(function(data) {
        console.log(data.data);
      });

    }]);

Fiddle Link

Gaurav Srivastava
  • 3,232
  • 3
  • 16
  • 36