Javascript Chrome Extension Passing Variable From AJAX to Array

Question

I'm writing a chrome extension which makes a call to google translate api. Once I get the translated word I'd like to add it into an array but I believe it's async and I'm not sure how to pass it to the array so that it's available on the main thread.

  var translatedWords = ["hola"];
  var text = "what";
  var key="******************";
  var source="en";
  var dest="es";


  $.ajax({
type: "GET",
url: "https://www.googleapis.com/language/translate/v2key="+key+"&source="+source+"&target="+dest+"&q="+text
}).done(function(response) {

//SET Translated word
var WordTranslated = response.data.translations[0].translatedText;

//populate into array
translatedWords.push(WordTranslated);

}).fail(function(response) {
console.log("FAILURE: " + JSON.stringify(response));
});


console.log("translatedWords " + JSON.stringify(translatedWords));

And this outputs

translatedWords ["hola"]

where it should now be

translatedWords ["hola","que"]

How can I accomplish this? Thanks!

Is there a way to access the response outside of the done handler? That's all in my background.js and I make a lot of calls to my translatedWords array elsewhere in the script. — Buster, Jun 25 '15 at 07:10
The words are inside your translatedWords array as soon as they have been received. Putting the console.log inside the done handler is just to show you that the request is working. — Sebastian Nette, Jun 25 '15 at 07:12
So I iterate through the array in the options page but it only shows the one item. I access it like so var background = chrome.extension.getBackgroundPage(); var translatedWords = background.translatedWords; Is there something special I need to do with this? — Buster, Jun 25 '15 at 08:19
Should I save the array with set and then get on my options page? — Buster, Jun 25 '15 at 08:26
No idea how chrome extensions work. Try putting a console.log into the done handler and print the response. Maybe there's an issue? — Sebastian Nette, Jun 25 '15 at 08:27

score 0 · Answer 1 · answered Jun 25 '15 at 10:55

This isn't an issue with the chrome extension, this is an issue with callbacks in an ajax request. When you call $.ajax, the response is asynchronous. This means that it doesn't wait to return until it returns to keep executing your method. So your order of operations is:

Make ajax call
Run console.log statement
Ajax statement returns, runs success

You need to put your logic that depends on the results into the actual success callback, like this:

$.ajax({
    type: "GET",
    url: "https://www.googleapis.com/language/translate/v2key="+key+"&source="+source+"&target="+dest+"&q="+text
}).done(function(response) {
    //SET Translated word
    var WordTranslated = response.data.translations[0].translatedText;

    //populate into array
    translatedWords.push(WordTranslated);

    console.log("translatedWords " + JSON.stringify(translatedWords));

    //Any other logic here as well
}).fail(function(response) {
    console.log("FAILURE: " + JSON.stringify(response));
});

Thanks Brian. So what do I do if I want to use the populated array in other places? Say appearing in the popup when user clicks the icon in the navbar. — Buster, Jun 25 '15 at 14:33
You'd have to store it in a properly scoped variable. It really depends on the structure of your code/page. — Brian, Jun 25 '15 at 18:55

Javascript Chrome Extension Passing Variable From AJAX to Array

1 Answers1