CODEWITHSUNDEEP
angularjsangular-httpangular-controller
Erik_K
Erik_K

Reputation: 3

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

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
  }

}]);

Upvotes: 0

Views: 541

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

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);
});

Upvotes: 0

Andrew Donovan
Andrew Donovan

Reputation: 552

$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);
    });
 }

}]);

Upvotes: 1

Related Questions