I have a service which returns an actual data. but when I call it in the controller, the return data structure is a bit confusing.

here is my factory:

app.factory("studentService", ['$http','$q','$localstorage','$state', 
    function($http,$q,$localstorage,$state) {

 return{
      getStudentsFrom : function(index){
                 return $http.get(app.baseUrlServer + app.getStudentsUrl + '/getbasedonindex/'+index)
                    .then(function(response){
                        if (response.data) {
                            return response.data;
                        } else {
                            // invalid response
                            return $q.reject(response.data);
                        }
                    },function(response){
                        // invalid response
                        return $q.reject(response.data);
                    });
            }
 }

}]);

I have a service which returns an actual data. but when I call it in the controller, the return data structure is a bit confusing.

here is my factory:

app.factory("studentService", ['$http','$q','$localstorage','$state', 
    function($http,$q,$localstorage,$state) {

 return{
      getStudentsFrom : function(index){
                 return $http.get(app.baseUrlServer + app.getStudentsUrl + '/getbasedonindex/'+index)
                    .then(function(response){
                        if (response.data) {
                            return response.data;
                        } else {
                            // invalid response
                            return $q.reject(response.data);
                        }
                    },function(response){
                        // invalid response
                        return $q.reject(response.data);
                    });
            }
 }

}]);

Here is my controller that calls it

var app_ctrl = angular.module('app.controllers');

app_ctrl.controller('BrowseController',['$scope','$state', 'studentService', '$localstorage', 
	function($scope,$state, studentService, $localstorage, $timeout) {
  
   $scope.noMoreItemsAvailable = false;
 // $scope.NumOfRows=studentService.getNumOfRows();

  $scope.students = [];
  $scope.counter=1;

console.log(studentService.getStudentsFrom($scope.counter));

  

}]);

and here is what I get.

Promise {$$state: Object, then: function, catch: function, finally: function}
$$state: Object
status: 1
value: Array[1]
0: Object
length: 1
__proto__: Array[0]
__proto__: Object
__proto__: Object

The question is, how can I access the value?, thanks

• javascript
• angularjs
• ionic-framework

Share Improve this question Follow asked May 23, 2015 at 5:53 Bilal BayasutBilal Bayasut 12133 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The function $http.get return a promise you need to use it on this way :

studentService.getStudentsFrom($scope.counter).then(
    function(result) {
       console.log(result);
    }
);

see https://docs.angularjs/api/ng/service/$http or https://docs.angularjs/api/ng/service/$q

before you explore the $http promises and async calls further, i think you may have to fix this: from var app_ctrl = angular.module('app.controllers');
to this var app_ctrl = angular.module('app.controllers', []);

angularjs docs: "The empty array in angular.module('myApp', []). This array is the list of modules myApp depends on."