variable not being returned (unidentified) - AngularJS

Question

In my controller I am calling the function

function initialiseQuizContent(quizIdArray){
   alert(getQuizService.getQuizContent(quizIdArray));
}

which calls the a method in the following service

app.service('getQuizService', function($http) {

    var quizArray;

    this.setQuizArray = function(quiz){
        quizArray = quiz;
    };

   this.getQuizArray = function(){
        return quizArray;
    };

    this.getQuizContent = function(quizArray){

        var $promise=$http.get("http://localhost/PHP/getQuizContent.php", {'quizArray': quizArray}); //send data to addQuiz.php
        var theReturn;
        $promise.then(function(msg){

            //alert(msg.data);
            theReturn = msg.data;
        });

        return theReturn;

    };

});

However the result I get for the alert is 'undefined'. I know that the call to the PHP file works fine as if I put 'alert(msg.data)' within the promise, as commented out above, then the correct array is returned. I am new to this so excuse any silly questions but it seems as if the value that is being returned for the 'getQuizContent()' method is done before the PHP file is executed and the msg.data is received? Resulting in the undefined variable 'theResult'.

I would appreciate any help. Thanks

if you need to GET data , why are you using $http.post and not $http.get? — Alex Choroshin, Mar 27 '14 at 23:39

score 2 · Accepted Answer · answered Mar 27 '14 at 23:51

2

Working with $http service means working with AJAX, the response is asynchronous, that why you got undefined, I would suggest changing your service and doing something like this:

app.service('getQuizService', function($http) {

    var quizArray;

    this.setQuizArray = function(quiz){
        quizArray = quiz;
    };

   this.getQuizArray = function(){
        return quizArray;
    };

    this.getQuizContent = function(quizArray){

        var promise=$http.post("http://localhost/PHP/getQuizContent.php",
         {'quizArray': quizArray}).then(function (response) {

        console.log(response);

        return response.data;
      });

        return promise;

    };});

then in controller do something like this:

function initialiseQuizContent(quizIdArray){
     getQuizService.getQuizContent(quizIdArray).then(function(data){
     alert(data);
    });
}

answered Mar 27 '14 at 23:51

Alex Choroshin

6,177
2
28
36

Why the extra `var promise` variable? – Benjamin Gruenbaum Mar 27 '14 at 23:55
just for the sake of demo, to show how can we use promise. – Alex Choroshin Mar 27 '14 at 23:58
You can return the promise without assigning it to another variable in the meantime. – Benjamin Gruenbaum Mar 28 '14 at 00:00
you are right, just wanted to show how to work with a promise. – Alex Choroshin Mar 28 '14 at 00:01
Assigning it to a variable and then immediately returning that variable is different from returning it without assigning it to an otherwise unused variable how? – Benjamin Gruenbaum Mar 28 '14 at 00:01
I'm Assigning it to a variable and then immediately returning so the caller can resolve the promise. – Alex Choroshin Mar 28 '14 at 00:04
Right, but you can just return an expression - you can do `return x` instead of `var a = x; return a;`. In your case - `return $http.post(...` – Benjamin Gruenbaum Mar 28 '14 at 00:05
as I said earlier, you are absolutely correct, the result is the same, I only wanted to make the code more readable :) – Alex Choroshin Mar 28 '14 at 00:08
Thanks Alex it works! I wasn't aware of it being asynchronous, I understand now – FootsieNG Mar 28 '14 at 00:57

variable not being returned (unidentified) - AngularJS

1 Answers1