Storing Ajax Request Results into a Javascript Var

Question

I am trying to store the results of the return ajax call as: var yValue that is usable in javascript, but the results returning for yValue is always 0.

<head>    
$.ajax({
      url: 'test2.php',
      success: function(data) {
          var yValue= data; // data contains value 1; 
      }
    }); 

    alert (yValue); 
</head>

The results returned is always zero or null, and when i try to check for the value of data using an alert box, it is always 1.

Even when i used data as the result to store into my array"dynamicdata" that i have created, it will return a value of 0 or NULL:

var globalData = null;
$.ajax({
    url: 'test2.php',
    async: false,
    success: function(data) {
        globalData = data;
    }
});

            var j=j+1;

            var CurrentDate1 = new Date((new Date()).getTime())
            var hours=CurrentDate1.getHours()
            var minutes=CurrentDate1.getMinutes()
            var seconds=CurrentDate1.getSeconds()
            if (minutes<=9) minutes="0"+minutes;
            if (seconds<=9) seconds="0"+seconds;
            var timer=hours+":"+minutes+":"+seconds+"";


            // remove the first element
            dynamicdata.splice(0, 1);
            // add a new elemez
            dynamicdata.push([timer, globalData]);

Anyone can help?

Welcome to the wonderful world of async! You can't do that. — SLaks
– SLaks, Commented Dec 25, 2011 at 17:08

Darin Dimitrov · Accepted Answer · 2011-12-25 17:09:52Z

6

I am trying to store the results of the return ajax

Don't try to fight against the asynchronous nature of AJAX (it's what the first letter of the acronym stands for). It is a battle that you will lose. If you want to do AJAX you should stop thinking and writing code in a sequential manner. You should use events. You subscribe for events (such as the success callback of an AJAX call) and you consume the results only inside those events.

So in your case instead of trying to store the results inside a variable simply use those results inside the callback:

$.ajax({
    url: 'test2.php',
    success: function(data) {
        // Here and only here you can hope to reliably use the results
        // of an AJAX call
        alert(data);
    }
});

For completeness sake of the answer (not as something that you should ever do) you could set the async flag to false:

var globalData = null;
$.ajax({
    url: 'test2.php',
    async: false,
    success: function(data) {
        globalData = data;
    }
});
alert(globalData);

Notice however that by doing this you are no longer doing AJAX. The call is not asynchronous. It is a standard synchronous call that will block the user browser during the processing. This completely defeats the whole purpose of AJAX. Don't do this.

answered Dec 25, 2011 at 17:09

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1115461 Over a year ago

I thought of using the results returned, but somehow the data returned is NULL when i push the value into an javascript array. Any workaround to his problem?

Darin Dimitrov Over a year ago

@user1115461, it's normal that it is null. The $.ajax method returns immediately. The success callback could be invoked much later. The workaround is to push the value inside the success callback: success: function(data) { someGlobalArray.push(data); }

user1115461 Over a year ago

It doesn't seem to be able to store the data into the arary, following your method. Data value returned is 1, but when you check for the value inside the array, its null;

Darin Dimitrov Over a year ago

@user1115461, it is able to store the data. It's just that you are trying to read it before it is stored. That's your problem. So check for values only inside the success callback, not outside.

David Hellsing · Accepted Answer · 2011-12-25 18:08:57Z

1

You can add ascync: false to the ajax call:

var yValue;

$.ajax({
  url: 'test2.php',
  success: function(data) {
      yValue = data; // data contains value 1; 
  },
  async: false
}); 

alert(yValue);

This is not recommended though. You might as well get your head around asynchronous calls in JavaScript, you will be using it a lot. Here is an example on how you can organize your code if you are uncomfortable with nesting functions:

$.ajax({
  url: 'test2.php',
  success: onReady
}); 

function onReady(data) {
  // this is called when the ajax call is completed.
  alert(data);
}

edited Dec 25, 2011 at 18:08

answered Dec 25, 2011 at 17:15

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

nikc.org Over a year ago

The scope for yValue is the containing function. It will not exist outside it. Async or not.

Collectives™ on Stack Overflow

Storing Ajax Request Results into a Javascript Var

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related