Angularjs; use $http in service returns reference instead of actual data

Question

I'm using the services directive in Angularjs not factory and I need to populate a json file to local variable;

/* Contains projects on the town */
leMaireServicess.service('cityService', function($http) {

    // JSON regions and cities loader
    this.cities = [];

    // initCities 
    this.initCities = function() {
        this.cities = $http.get('data/census/cities.js').success(function(data) {
            return data;
        });
        return this.cities;
    };

    // Get city info
    this.getCity = function() {
        return this.cities;
    };
});

And in my controller I have

// Saved game controller
leMaireControllers.controller('GameCoreCtrl', function($scope, cityService) {

    /* Control the town project slides */
    cityService.initCities();
    $scope.city = cityService.getCity();

    console.log($scope.city);
});

But instead of returning the actual data, it returns;

Object {then: function, catch: function, finally: function, success: function, error: function}

zszep · Accepted Answer · 2014-02-01 12:21:42Z

6

You can use a watch to make this work (see plunker)

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,cityService) {
  //$scope.cities = [];
  $scope.service = cityService;
  cityService.initCities();


  $scope.$watch('service.getCity()', function(newVal) {
    $scope.cities = newVal;
    console.log(newVal)
  });


});

app.service('cityService', function($http) {
  var that = this;
  this.cities = [];

  this.initCities = function() {
      $http.get('data.js').success(function(data) {
          that.cities = data.cities;
      });
  };

  this.getCity = function() {
      return this.cities;
  };
});

edited Feb 1, 2014 at 12:21

answered Jan 31, 2014 at 19:43

zszep

4,4835 gold badges41 silver badges58 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:30:56Z

3

$http returns a promise which is what you're setting this.cities to.

This might help explain more, https://stackoverflow.com/a/12513509/89702

In your controller you should be able to do something like this...

cityService.initCity().then(function(data) { $scope.city = data; }

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jan 31, 2014 at 18:35

Thomas Schultz

2,4573 gold badges26 silver badges37 bronze badges

2 Comments

numediaweb Over a year ago

Thanks for the quick answer. But how can I access the retrieved data inside the service itself? Is it the same way as if inside the controller?

numediaweb Over a year ago

Just to correct your solution, you mean cityService.initCities() instead of cityService.getCity().

dimirc · Accepted Answer · 2014-02-01 02:18:18Z

You are working with promises which represent the result of an action that is performed asynchronously. Try it this way:

leMaireServicess.service('cityService', function($http) {

    this.promise = {};

    // initCities 
    this.initCities = function() {
        this.promise = $http.get('data/census/cities.js');
    };

    // Get city info
    this.getCity = function() {
        return this.promise;
    };
});

And in the controller you need to put your code in a callback:

// Saved game controller
leMaireControllers.controller('GameCoreCtrl', function($scope, cityService) {

    /* Control the town project slides */
    cityService.initCities();
    cityService.getCity().then(function(result){
        $scope.city = result.data;
        console.log($scope.city);
    });

});

Collectives™ on Stack Overflow

Angularjs; use $http in service returns reference instead of actual data

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related