Not able to pass a variable

Question

I must be making a basic javascript error. My script is failing to pass a variable, and I can't figure out why. Here's the code, with comments.

var earth;

function loadWorld(world) {
    // loads the world from a Json file using php
    $.ajax("loadfile.php", {
        dataType: "json",
        async: false
    }).done(function (result) {
        console.log(result);
        //Here consul.log provides the expected results, confirming that the file has been loaded into the result.
        world = result;
        console.log(world);
        //Here too, properly transferred into world. 
    });
};

function button1() {
    loadWorld(earth);
    console.log(earth);
    //But here console.log tells me earth is undefined!
    showData(earth);
}

I've tried using earth as a global variable and simply assigning it in function loadworld(), like this:

earth = result;

I've also tried using a return function. But once I leave loadworld, earth is always undefined. Any ideas why?

http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Satpal, Feb 11 '14 at 11:31
What is `earth` supposed to contain? You need to give it a value before you pass it as a function parameter. — Barmar, Feb 11 '14 at 11:32
Why are you passing it as a parameter when `loadWorld` doesn't use its value? Assigning to the parameter doesn't change the original variable; Javascript is pass-by-value, not pass-by-reference. — Barmar, Feb 11 '14 at 11:34
you haven't defined earth anywhere. define it before passing to `loadworld()` function. — Navin, Feb 11 '14 at 11:34
2 things here you cannot pass variables by reference in Javascript. secondly the ajax call is async so prob not complete by the time you console.log in button1 function — alfonsob, Feb 11 '14 at 11:36

score 1 · Answer 1 · answered Feb 11 '14 at 11:34

1

It doesn't work because of asynchronously. Your last console.log called before your ajax request call done callback. Best solution is using callbacks

function loadWorld(world, success) {
  $.ajax( "loadfile.php", {dataType: "json", async: false} )
       .done(function (result) {     
          if(success) success(result);
        });     
};  

function button1 () {
    loadWorld(earth, function(result){
      //your callback logic  
      console.log(result)
      showData(result);
    }); 

}

answered Feb 11 '14 at 11:34

Farkhat Mikhalko

3,565
3
23
37

Thanks. I'll work with this. – Steve Fars Feb 11 '14 at 11:44
I thought I had avoided this by setting async to false, which I know is ugly. But it seems to be stuck at async anyways. – Steve Fars Feb 11 '14 at 11:45
No problem)) I've recommended to you read https://github.com/BonsaiDen/JavaScript-Garden – Farkhat Mikhalko Feb 11 '14 at 11:45

score 0 · Answer 2 · edited May 23 '17 at 10:25

(EDIT: As noted elsewhere, you also have an issue of the AJAX call not necessarily finishing before your function returns.)

The problem is that JavaScript doesn't truly pass-by-reference. It effectively passes a copy of a reference. That means that if you pass an existing object into a function, you can make changes to it locally and it will affect the original. However, if you entirely overwrite the variable (by assigning a new object to it), the original will be unaffected.

In your case, you're assigning the result into world. All that does is affect the local world variable; it doesn't not overwrite earth.

See this question for more information: Is JavaScript a pass-by-reference or pass-by-value language?

A better approach would be something like this:

var earth;

function loadWorld()
{
    // (loading code here...)
    return result;
}

function button1()
{
    earth = loadWorld();
}

Thanks. I've tried that. It doesn't seem to work any better. The problem seems to be with ajax and asynchronicity. — Steve Fars, Feb 11 '14 at 11:43

Not able to pass a variable

2 Answers2