Javascript variable scope with AJAX call

Question

I am not a seasoned Javascript programmer so may be there is something basic wrong here. I just want to write a function that makes an AJAX call to a WEBAPI and return the array back. But I am making some mistake with understanding variable scope.

function GetProductsOfAccount(AccountID) {
      var returnProducts;
      console.log("In GetProductsOfAccount");
      var serviceURL = productURI + "/GetProductsOfAccount/" + AccountID;
      console.log(serviceURL);
      $.ajax({
          type: "GET",
          datatype: "json",
          url: serviceURL,
          context: this,
          success: function (Products) {
              console.log("From AJAX" + Products);
              returnProducts = Products;

              //This correctly holds and shows all products
              console.log("Return Products 1 " + returnProducts);
          },
          error: function (x, y, z) {
              returnProducts = null;
              console.log("Error" + x + '\n' + y + '\n' + z);
          }
      });

     //This just shows undefined
      console.log(" Returned Products 2 " + returnProducts);
      return returnProducts;
  }

Why does the returnedProducts lose value at the end and what is the correct way to do such a thing?

Console log2 is executed outside of the ajax success callback, which means that the request was not completed yet. — html_programmer, Feb 26 '14 at 10:28
Correct. Thank you. The detailed response in the question Arun mentioned explains it all. — user2645830, Feb 26 '14 at 10:32

html_programmer · Answer 1 · 2014-02-26T10:41:41.347

Edit: yet slightly alternative syntax using jQuery deferred (I didn't see it in Arun's link):

var productsOfAccount = function (AccountID) {

  var serviceURL = productURI + "/GetProductsOfAccount/" + AccountID;

  return $.ajax({
      type: "GET",
      datatype: "json",
      url: serviceURL,
  }).promise();
}

var test = $.productOfAccount(20)

test.then(function(products){
          console.log("From AJAX" + products);
          returnProducts = Products;

          //This correctly holds and shows all products
          console.log("Return Products 1 " + returnProducts);
});

You can apply test.then multiple times for different purposes.

Javascript variable scope with AJAX call

1 Answers1