• 0

Populate JS Variable With Data from AJAX Request


Question

Is it possible to put some data from an AJAX Post request into a JavaScript variable?

Consider the following example:

var
myVar
= "Hello World";

alert(
myVar
);

Modifying the example above, I'd like to retrieve the text "Hello World" from a page on my server (http://localhost/text.txt).

Can I do something like, assuming I'm using jQuery:

var
myVar
;

$.post(
"/text.txt"
, function(data){

myVar
= data;

},"html");

alert(
myVar
);

15 answers to this question

Recommended Posts

  • 0

The callback you made is correct, the var'll be populated at the end of the call. If you need to process the var after it's been populated you must assure the order of execution of your code. Making the ajax request synchronous is "ugly", the best way is to make proper use of the callback functions.

But if you really want you must simply put:


$.ajaxSetup({
async:false})
[/CODE]

before the $.post.

  • 0

Try running this bit of code.

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script>

$(function(){

var
myVar
=
"
xxx
"
;

$.ajaxSetup({async:false});

$.post(
"./text.txt"
, function(data){

myVar
= data},
"html"

);

alert(
myVar
);

});

</script>

I see the "XXX" text in the alert, and not the content from my "text.txt" file.

The content of my "text.txt" file is as follows:

Hello World

  • 0

Yeah because the alert is shown before the $.post completed. Try this:


$.post("text.txt", function(data) {
myVar = data;
alert(myVar);
});
[/CODE]

And you'll have the alert with "Hello World" (or a connection/timeout error).

Edit:

I tried the syncronous version (with a get method and jquery 1.6.2) and it works. My simple hfs http server doesn't like post :)

  • 0
  On 30/11/2011 at 10:38, Brian Miller said:

But how do I populate that global var with the Ajax data? That's all I want.

I'm only using alert() to show the variable is populated.

Like I (and AdamLC) said your code is fine to populate the value. At the very end of the ajax request you'll have your value ("Hello World") in the global variable. I just wanted to add that IF you must do something with your value you must assure that you wait for the ajax post to complete. Your alert doesn't wait, that's why it shows "xxx"

  • 0
  On 30/11/2011 at 10:43, Killer_Z said:

Like I (and AdamLC) said your code is fine to populate the value. At the very end of the ajax request you'll have your value ("Hello World") in the global variable. I just wanted to add that IF you must do something with your value you must assure that you wait for the ajax post to complete. Your alert doesn't wait, that's why it shows "xxx"

That will only happen with Asynchronous calls correct? Meaning, it behaves that way because the processing of the rest of your code continues while it grabs the data in the background right? :)

  • 0

Yes :) , quoting from: http://api.jquery.com/jQuery.ajax/

  Quote

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

  • 0
  On 30/11/2011 at 10:53, winlonghorn said:

Thank you. Just checking. It is never safe to make assumptions. lol. :)

You're welcome. Javascript is quite tricky :) it is supposed to be single threaded but often there're some fun situations, that's one of the reason jquery use callback for everything (like the immediate events).

  • 0

Thanks guys. I think I see the problem. The Global Var does get populated, but in FireFox only. It doesn't on Chrome.

Here's some new code:


<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script>
var globalVar = "xxx";

alert(
"STARTING:\n\n" +
"Global Var: " + globalVar
);

$(document).ready(function(){
$.ajaxSetup({async:false});

$.post(
'./text.txt',
function(data){
showVar(data)
},
"html"
);

function showVar(localVar){
alert(
"AFTER AJAX REQUEST:\n\n" +
"Global Var: " + globalVar + "\n" +
"Local Var: " + localVar
);
}
});
</script>
[/CODE]

Anyone want to hazard a guess why Chrome is not wanting to play nice?

  • 0

Where exactly are you assigning the results of the AJAX request to "globalVar"? I don't see such an assignment in your snippet. Also, this is not a browser issue: you're just doing it wrong.

Seriously though, you need to grasp the concept of asynchronous programming in JavaScript.

&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script>;script type="text/javascript"&gt;
$(function(){
// 1) Declare the variable
var myVar = "xxx";
// myVar === "xxx"

// 2) Fire up the AJAX request
//   This call returns immediately (hence "asynchronous")
$.post("./text.txt", function(data) {
   // 4) The request has completed and the results are retrieved
   //	 This callback gets called
   // 5) The variable gets overwritten
   myVar = data;
   // myVar === "Hello world"
   // 6) This is the point where you can do stuff
   //	 with the new data in the variable
   doStuff();
}, "html");

// 3) Continue after firing the request
//   The request is still running at this point
alert("Right after firing the request, myVar is still "+myVar);
// myVar === "xxx"
});

function doStuff() {
	alert("Now that the request has completed, the new value of myVar is "+myVar);
}
&lt;/script&gt;

Yes, you can make synchronous AJAX requests by setting "async" to false. I've never come across a need to do this: you can always use callbacks (or the new deferred object in jQuery) as the next part of your program flow.

This topic is now closed to further replies.
  • Posts

    • Using NASA’s IXPE telescope and a fleet of observatories, scientists discovered that the system’s intense X-rays don’t come from its glowing accretion disk as previously believed, but from a chaotic, high-speed wind of particles hurled out by the pulsar itself. The findings challenge old models and reveal a single, powerful mechanism behind the pulsar’s radiation. It’s a dramatic twist in our understanding of how dead stars can still light up the universe. A global team of astronomers has made a significant discovery about how the energetic remains of exploded stars interact with the space around them. Using NASA’s IXPE (Imaging X-ray Polarimetry Explorer) along with several other observatories, researchers gathered new insights into this dynamic cosmic behavior. The scientists, working across the United States, Italy, and Spain, focused their investigation on a puzzling stellar system known as PSR J1023+0038, or simply J1023. This system features a rapidly spinning neutron star that draws material from a smaller companion star. As a result, an accretion disk of matter has formed around the neutron star. The neutron star also functions as a pulsar, emitting intense beams of radiation from its magnetic poles as it spins, creating a pattern that resembles a lighthouse sweeping through space. What makes J1023 especially important is that it switches between two distinct phases. https://scitechdaily.com/nasa-just-discovered-where-these-mysterious-space-x-rays-really-come-from/    
    • Artifacts from the Iron Age have revealed an intense historical magnetic anomaly in the Middle East. Could using a similar approach elsewhere help us unravel the mysteries of Earth's magnetic field? Ben-Yosef, an archaeologist at Tel Aviv University, had been working in southern Jordan with Ron Shaar, who was analyzing archaeological materials around the Levant. Shaar, a geologist at The Hebrew University of Jerusalem, was building a record of the area's magnetic field. The hunk of copper slag — a waste byproduct of forging metals — they found recorded an intense spike in Earth's magnetic field around 3,000 years ago. Shaar worked hard to give them more evidence. After they had analyzed and described samples from around the region for more than a decade, the anomaly was accepted by the research community and named the Levantine Iron Age Anomaly (LIAA). From about 1100 to 550 B.C., the magnetic field emanating from the Middle East fluctuated in intense surges. https://www.livescience.com/archaeology/earths-magnetic-field-is-weakening-magnetic-crystals-from-lost-civilizations-could-hold-the-key-to-understanding-why
    • Designed by former F1 engineers. Pure danger. A company made up of former F1 racing engineers has unveiled an outrageous e-scooter that can reach a top speed of north of 100 miles per hour — and covers a whopping 150 miles on a single charge. The bizarre contraption, dubbed The Turbo, was developed by UK-based e-scooter company Bo, whose existing lineup targets the more premium end of the last-mile — or last 150 miles, in this case — mobility market. The Turbo's specs are borderline hard to believe. The metal-clad and girthy two-wheeler features a 24,000-watt dual-motor engine and an enormous 1,800-watt-hour battery. Aerodynamic air intakes funnel wind to keep everything cool. https://futurism.com/the-byte/100-mph-escooter-hazard    
    • Apple was waiting for Samsung to refine the technology. Now, they will ask Samsung to make their screen. Amazing...
  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      Michael Scrip
      203
    3. 3
      ATLien_0
      197
    4. 4
      Xenon
      136
    5. 5
      +FloatingFatMan
      116
  • Tell a friend

    Love Neowin? Tell a friend!