TypeError from Google Closure compiled file

Question

I have a Javascript file compiled with the Google Closure compiler that gives me this error TypeError: f is undefined. When I look at the compiled code it's impossible to understand but a chunk of it is commented out. I'm really stumped on why I'm getting this error but I suspect it has something to do with the following script (which is the only thing I've edited since getting this error).

var response;

var request = new goog.net.XhrIo();

goog.events.listen(request, "complete", function(){

    if (request.isSuccess()) {

        response = request.getResponseText();

        console.log("Satus code: ", request.getStatus(), " - ", request.getStatusText());

    } else {

        console.log(
        "Something went wrong in the ajax call. Error code: ", request.getLastErrorCode(),
        " - message: ", request.getLastError()
        );
    }

});


request.send("load_vocab.php");


var rawVocab = response[rawVocab];
var optionVocab = response[optionVocab];
alert(rawVocab.length);
alert(optionVocab.length);

Here's also load_vocab.php...

try {
    $conn = new PDO('mysql:host=localhost;dbname=tygrif_school', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $conn->prepare('SELECT word, translation, example_sentence_1 FROM vocabulary_game WHERE game_type = :game_type');
    $stmt->execute(array('game_type' => 'target'));

    while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
       $data['rawVocab'][] = $row;
    }

    $stmt = $conn->prepare('SELECT word, translation FROM vocabulary_game');
    $stmt->execute(array());

    while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
        $data['optionVocab'][] = $row;
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

echo json_encode($data);

Answer 1

You do know that xhr requests are asynchronous?

This means that when you call send you have to wait for the response to return, what you do is try to read the response on the next line. Your quoting is a problem too, the compiler will rename rawVocab and optionVocab but the returned data will not be renamed so you need to quote these values as ne8il pointed out.

var response;
var request = new goog.net.XhrIo();
goog.events.listen(request, "complete", function(){
    if (request.isSuccess()) {
        window['console'].log("Now the response returned, setting response variable");
        response = request.getResponseText();
        console.log("Satus code: ", request.getStatus(), " - ", request.getStatusText());
    } else {
        console.log(
        "Something went wrong in the ajax call. Error code: ", request.getLastErrorCode(),
        " - message: ", request.getLastError()
        );
    }
});
window['console'].log("Sending request");
request.send("load_vocab.php");
window['console'].log("Trying to read response");
var rawVocab = response['rawVocab'];
var optionVocab = response['optionVocab'];

The output of the above code would be:

Sending request
Trying to read response
Error
Now the response returned, setting response variable

Answer 2

I think the problem is here :

var rawVocab = response[rawVocab];
var optionVocab = response[optionVocab];

You are not quoting your property accessors properly. Try this :

var rawVocab = response['rawVocab'];
var optionVocab = response['optionVocab'];