AngularJS: Controller logs Factory's $http response as "undefined"

Question

I want my $http response data to be available to the controller, so as to display JSON data in the view via directive ("{{ hint }}"). However, while, in the controller, I can log data from the factory, the data will not provide itself in a useable manner.

When what is provided by the factory is logged in the controller, it is either "undefined" or "not a function". From the code below, "undefined" is logged"

Please, help me right my wrongs? How do I clean this up, so as to use factory's .GET data in the controller?

Controller:

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

MainCtrl.controller('Ctrl2', [ "QuizViewServ", '$log', '$scope',
function(QuizViewServ, $log, $scope){


 $scope.init = function(){
    $scope.hint = "FooBar";  //Testing binding bw Ctrl2 & the view
    $log.log(QuizViewServ.getQuizData.quizQz); // <-LOGS AS "UNDEFINED"
 }

}]);

Factory:

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

MainServ.factory('QuizViewServ', ['$http', function($http){
 console.log("factory working");

 var getQuizData = function(){

   $http({
      method: 'GET',
      url: '/assets/json.json'
    }).then(function successCallback(response) {
        console.log("inside successgul GET req");


        var quizQz;
        quizQz = response.data.quizQs;
        console.log(quizQz);


    }, function errorCallback(response) {

        alert("Trouble grabbing requested data.")
    });
  }
  return {
    getQuizData : getQuizData
  }

}]);

Yeah, I know. I should fix that. I'm French-speaking, and pony is spelt poney here. Given that it looked to me like an English word, I thought it was spelt this way in English, too. — JB Nizet
– JB Nizet, Commented May 13, 2016 at 12:48
The author is you and your native tongue is French? Desole. You misspelled nothing. Again, great article. Thank you. — Erik_K
– Erik_K, Commented May 13, 2016 at 12:50

Andrew Donovan · Accepted Answer · 2016-05-12 19:48:04Z

1

$http uses promises to return the result. When using QuizViewServ.getQuizData.quizQz you are logging nothing, since its asynchronous.

In your factory, return the promise, and in you controller, handle it.

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

MainServ.factory('QuizViewServ', ['$http', function($http){
 console.log("factory working");

 var getQuizData = function(){

   return $http({
      method: 'GET',
      url: '/assets/json.json'
    })
  }
  return {
    getQuizData : getQuizData
  }

}]);

and in your controller

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

MainCtrl.controller('Ctrl2', [ "QuizViewServ", '$log', '$scope',
function(QuizViewServ, $log, $scope){


 $scope.init = function(){
    $scope.hint = "FooBar";  //Testing binding bw Ctrl2 & the view

    QuizViewServ.getQuizData().then(function(result){
        $log.log(result.data);
    });
 }

}]);

answered May 12, 2016 at 19:48

Andrew Donovan

5522 silver badges14 bronze badges

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

4 Comments

Erik_K Over a year ago

this does work. And for exactly the reasons you mentioned above, which I neglected. HOWEVER, doesn't this mean that the "business logic", of iterating through objects of the JSON file, has to stay in the Controller? For the sake of "cleanliness", should that logic be kept in the Service? ---I'm not disputing your answer, I'm genuinely curious.

Andrew Donovan Over a year ago

It depends if you need to do different treatments with the returned data. If it is somewhat unique for every controller that uses it, you should do it within the controller. If multiple controller needs the same data, then do your data treatment in the factory using @Zohaib Ijaz 's solution, they are both valid :P So basically, you have the option of doing both ways, depends on the scenario and your personal preference

Erik_K Over a year ago

Gotcha. That totally makes sense. Yes, I've tried yours and @Zohaib Ijaz ' solutions. They both work, as you said, in diff circumstances. Thanks.

Andrew Donovan Over a year ago

Glad we could help ! Please mark one of the answers as correct for other user's visiting this question later on

Zohaib Ijaz · Accepted Answer · 2016-05-12 19:56:38Z

0

You need to retrun that data. It is not possible as you are doing. Also quizQz propert is private. You can not access it even after that value has been set after ajax call.

var getQuizData = function(){

return $http({
  method: 'GET',
  url: '/assets/json.json'
}).then(function successCallback(response) {
    console.log("inside successgul GET req");


    var quizQz;
    quizQz = response.data.quizQs;
    console.log(quizQz);
    return quizQz;

  }, function errorCallback(response) {

    alert("Trouble grabbing requested data.")
    return '';
});

}

and in controller , get data like this.

QuizViewServ.getQuizData().then(function(data){
    console.log(data);
});

edited May 12, 2016 at 19:56

answered May 12, 2016 at 19:51

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

8 Comments

Andrew Donovan Over a year ago

You can't return data in a promise, You need to assign it to a variable that is declared outside of that promise, or return the object to handle the promis. My answer is the proper way to retrieve data from a promis. Return the function that returns the promis and handle it. : stackoverflow.com/questions/26854654/…

Zohaib Ijaz Over a year ago

I am using angular in my production app and I know ,we can return data , however I missed to add return statement before $http()

Andrew Donovan Over a year ago

Then you would have to $watch the result from getQuizData () that seems like bad practice if its the case, im curious as to how you do it

Zohaib Ijaz Over a year ago

No, no need to watch. I don't want to say that, learn first .. let me give you a refrence

Zohaib Ijaz Over a year ago

@AndrewDonovan, Look at this, if this is wrong , he can not get 337 up votes. Confirm first before rejecting someone's answer. stackoverflow.com/a/12513509/5567387

|

Collectives™ on Stack Overflow

AngularJS: Controller logs Factory's $http response as "undefined"

2 Answers 2

4 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related