Why does this factory return a $$ state object instead of response.data?

Question

So, I have a set of objects on the server that I want to populate ng-repeat when the page loads.

I had a factory done that retrieved the list from a resource on the server, for example:

app.factory('objectArray', ['$http', function($http) { // This is returning a $$state object // instead of response.data... return $http.post('/get_collection').then(function(response) { console.log(response.data); return response.data; }); }]); 

I had this code before when using ui-router and the resolve property in the status declaration. However, when I enter this factory directly into my controller, instead of receiving response.data, I get a $$ state object.

My controller is as follows:

  app.controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) { $scope.array = objectArray; console.log($scope.array); }]); 

Answer 1

What the $ http service (and therefore the objectArray service) objectArray is called a promise. You can access the actual data by registering a callback function that will be called when the data is available , that is, when the response to the HTTP request is returned from the server:

 objectArray.then(function(data) { $scope.array = data; }); 

The reason you directly access data when using the solution is because the router, when the resolution function returns a promise, expects the promise to be resolved. And only then he extracts the data from the promise and enters the data into the controller.

To better understand promises, you can read the following article (and its sequel ).

Answer 2

As @JB Nizet noted, your code is fine, just enable it in the controller. Here's a working demo

 angular.module('app', []); angular.module('app').factory('objectArray', ['$http', function($http) { // This is returning a $$state object // instead of response.data... ////// changed request type and url for the sake of example return $http.get('http://jsonplaceholder.typicode.com/posts/1') .then(function(response) { console.log(response.data); return response.data; }); }]); angular.module('app').controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) { //////resolve it here objectArray.then(function(successResponse){ $scope.array = successResponse; console.log($scope.array); }); }]); angular.bootstrap(document.body, ['app']); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="applicationController"> <h5>Hello {{array.title}}</h5> </div> 

Answer 3

mistakes

 @ angular.js:14800 [AngularJS - Leaflet] The marker definition is not valid. 17:49:07.437 angular.js:14800 [AngularJS - Leaflet] Received invalid data on the marker $promise. 17:49:07.438 angular.js:14800 [AngularJS - Leaflet] The marker definition is not valid. 17:49:07.439 angular.js:14800 [AngularJS - Leaflet] Received invalid data on the marker $resolved. 

$$ fortune was a problem.

 markersFactory.query().$promise.then(function(data) { // open_street_maps to replace google maps angular.extend($scope, { center: { lat: 40.7231572, lng: -73.988501, zoom: 13, } , markers: data, tiles: tilesDict.opencyclemap, }); }); 

SOLUTION: angular.copy

 markersFactory.query().$promise.then(function(data) { $scope.markers = data; // open_street_maps to replace google maps angular.extend($scope, { center: { lat: 40.7231572, lng: -73.988501, zoom: 13, } , markers: angular.copy($scope.markers), tiles: tilesDict.opencyclemap, }); }); 

not bad! .. =)