Not able to access Javascript variable which is in Scope..?

Question

Below is my javascript code.. I am declaring the variable 'allproductsAndPrice' outside the function.. But I am not able to access it after i initialize it.! Am i doing something wrong? when I try to alert it, It doesn't print anything.

var allproductsAndPrice = "";
$.getJSON("/Home/GetProducts",
    function (data, textStatus, jqXHR) {
        for (var i = 0; i < data.length; i++) {
            allproductsAndPrice = allproductsAndPrice + 
                "<option name='productName' id=" + data[i].productPrice + ">" + 
                data[i].Pname + "</option>";
        }
    }
);

alert(allproductsAndPrice);

You *are* doing something wrong... forgetting what the "A" in "Ajax" stands for. — Dave Newton, Jun 05 '14 at 14:12

Loïc Faure-Lacroix · Answer 1 · 2014-06-05T14:18:24.717

What's wrong here is that the alert will be called before the getJSON's callback will be called. Which means that allProductsAndPrice is always an empty string in the alert.

The call to getJSON is asynchronous which means that it will trigger a "complete" event on the ajax request and then the callback will get executed. You could make the call to getJSON synchronous but that is kind of against the idea.

To get a better idea of what is happening right now is this:

Initialize allproductsAndPrice to "" on the current scope.
Create an Ajax request
Alert with the content of allproductsAndPrice which is still ""
Complete event is triggered
Execute callback and affect something to allproductsAndPrice

What you should do instead is this:

    var allproductsAndPrice = "";
    $.getJSON("/Home/GetProducts",
      function (data, textStatus, jqXHR) {
          for (var i = 0; i < data.length; i++) {
              allproductsAndPrice = allproductsAndPrice + "<option name='productName' id=" + data[i].productPrice + ">" + data[i].Pname + "</option>";
          }

          // More code that should be executed
          alert(allproductsAndPrice);
    });

but i am initializing 'allproductsAndPrice' inside the $.getJSON function right? So it wont update?? — Uthaiah, Jun 05 '14 at 14:14

score 0 · Answer 2 · answered Jun 05 '14 at 14:14

try this. This will work and help you in identifying if there is an error. And second thing var allproductsAndPrice will remain empty in alert because ajax request is async, javascript will not wait for ajax response.

var allproductsAndPrice = "";
try {
    $.getJSON("/Home/GetProducts", function(data) {
        for (var i = 0; i < data.length; i++) {
            allproductsAndPrice = allproductsAndPrice + "<option name='productName' id=" + data[i].productPrice + ">" + data[i].Pname + "</option>";
        }
    });
} catch (e) {
    alert(e.message);
}
alert(allproductsAndPrice);

Not able to access Javascript variable which is in Scope..?

2 Answers2