Angular Promise gives array of objects intead of array after being resolved in controller

Question

I have the following code in my http Service(UserService):

module1.factory('UserService', ['$http', '$q', function($http, $q) {



      return {

        getModelValueTableValues1: function(CarLine, GeographyType, GeographyName, Duration, ModelId, ScenarioId, TimeKey) {



          return $http.get('http://localhost:8080/scenarioplan/models/data?ScenarioId=5&CarLine=Nissan%20-%20Rogue&TimeKey=Jul-16&Duration=1&Geographytype=National&GeographyName=National&ModelId=1001')
            .then(
              function successCallback(response) {



                return response.data;


              },
              function errorCallback(errResponse) {
                console.error('Error while fetching Model Parameter Table');
                return $q.reject(errResponse);
              }
            );
        },

ANd I have the following code in my controller:

$scope.getModelValueTableValues = function(CarLine, Geography, Duration, ModelId, ScenarioId) {

  UserService.getModelValueTableValues1(CarLine, Geography.split('-')[0], Geography.split('-')[1], Duration, ModelId, ScenarioId, '16-Jul')
    .then(
      function(d) {

        console.log("the data object from promise is", d);
        console.log("the data object from promise is", d.length);

        console.log('The Promise has been successfully resolved!!!!');
      },
      function(errResponse) {
        console.error('The Promise was not successfull');
      }
    );
};

But instead of returning an array of data, the promise, after getting resolved gives an array of objects as shown by the image below in my debug window(F12).

The reponse from Web Service Call seems to valid Data as shown by F12 Console Output below:

Can someone please help me to resolve this issue?? I have been trying to solve this throughout the day but without any success!

What does your response has ? http://localhost:8080/scenarioplan/models/data?ScenarioId=5&CarLine=Nissan%20-%20Rogue&TimeKey=Jul-16&Duration=1&Geographytype=National&GeographyName=National&ModelId=1001what does this url return — Susheel Singh
– Susheel Singh, Commented Jul 4, 2016 at 17:06

vanhonit · Accepted Answer · 2016-07-04 17:13:35Z

1

$http implement promise already. Your function should

return $http.get('http://localhost:8080/scenarioplan/models/data?ScenarioId=5&CarLine=Nissan%20-%20Rogue&TimeKey=Jul-16&Duration=1&Geographytype=National&GeographyName=National&ModelId=1001');

Or if you want process data inside function you should.

return {

  getModelValueTableValues1:function(CarLine,GeographyType,GeographyName,Duration,ModelId, ScenarioId,TimeKey){         
     var deffered = $q.defer();
     $http.get('http://localhost:8080/scenarioplan/models/data?ScenarioId=5&CarLine=Nissan%20-%20Rogue&TimeKey=Jul-16&Duration=1&Geographytype=National&GeographyName=National&ModelId=1001')
       .then(
                    function successCallback(response){
                                   deffered.resolve(response);
                                }, 
                    function errorCallback(errResponse){
                          console.error('Error while fetching Model Parameter Table');
                           deffered(errResponse);
                           }
                        );
         return deffered.promise;
        },

answered Jul 4, 2016 at 17:13

vanhonit

6171 gold badge5 silver badges14 bronze badges

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

4 Comments

Sabyasachi Over a year ago

@vanmohit...Your approach has partially shown me a road ahead. I am going to update you after trying this. Thanks!

Sabyasachi Over a year ago

Hi @Vanmohit.....I was able to finally get it to work. I had to use the function JSON.parse(angular.toJson(d.data)) inside my controller to process the data returned from your function.

Icycool Over a year ago

You can return $http's promise even when you want to process data inside .then, just return the result inside the function will do. For reject side use return $q.reject(reason).

Icycool Over a year ago

Actually, refer to OP's code, it is the correct way to do so. I mean the one in the question.

Icycool · Accepted Answer · 2016-07-04 18:53:08Z

0

Here is the complete Steps that I followed to get my issue resolved.

As suggested by @vanmohit: I used his code inside my appfactory Service like this :

return {
     getModelValueTableValues1: function(CarLine,GeographyType,GeographyName,Duration,ModelId, ScenarioId,TimeKey){         
         var deffered = $q.defer();
         $http.get('my url here')
             .then(
                    function successCallback(response){
                        deffered.resolve(response);
                    }, 
                    function errorCallback(errResponse){
                        console.error('Error while fetching Model Parameter Table');
                        deffered(errResponse);
                    }
            );
        return deffered.promise;
    },

In my controller code , I used this function :

function(CarLine, Geography,Duration,ModelId, ScenarioId ){
    UserService.getModelValueTableValues1(CarLine,Geography.split('-')[0],Geography.split('-')[1],Duration,ModelId,ScenarioId,'16-Jul')
        .then(
            function(d) {
               console.log("the data object from promise is",JSON.parse(angular.toJson(d.data))[1].paramName);
               //console.log("the data object from promise is",d.length);
               //JSON.parse(angular.toJson(resp))
               $scope.firstrow = JSON.parse(angular.toJson(d.data));
               console.log('The Promise has been successfully resolved!!!!');
           },
           function(errResponse){
               console.error('The Promise was not resolved');
           }
       );
  };

And now I am able to parse through the JSON Data inside my controller!! Thanks so much for the help!

edited Jul 4, 2016 at 18:53

Icycool

7,1991 gold badge27 silver badges33 bronze badges

answered Jul 4, 2016 at 17:34

Sabyasachi

5414 gold badges9 silver badges22 bronze badges

5 Comments

vanhonit Over a year ago

You can use $scope.firstrow = d.data that enough. By default $http will parse data to JSON.

Sabyasachi Over a year ago

@vanhonit....Also , I am unable to use the value returned from the promise and save it to a variable...Since it is an asynchronous call, I am unable to save it to a scope variable. Can you help me to do it?

Sabyasachi Over a year ago

@vanmohit I am unable to access $scope.firstrow variable outside this function after I write $scope.firstrow = d.data . WHen I access $scope.firstrow variable outside the function. It returns as undefined. Why so?

Sabyasachi Over a year ago

Ok....I figured out why...Because it is an asynchronous ajax call. Angular doesnt know when the promise will be returned.

vanhonit Over a year ago

You should read about isolate scope. In your case you can define variable outside callback function or check variable value before use.

Collectives™ on Stack Overflow

Angular Promise gives array of objects intead of array after being resolved in controller

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related