Javascript Scope: variable not defined

Question

In the following code the alert inside the function works fine, but the second has variable undefined, and yet I have delcared the variable outside of the function. Why is this?

var data = [];
$.post(
        'matchEngine.php', 
        function(data) {
                for (var i = 0, len= data.length;i <len; i++) {
                for ( h = 0, len2= data[i].length;h <len2; h++) {

                data[i][h][0]=(data[i][h][0])*30;
                data[i][h][1]=(data[i][h][1])*30;
                data[i][h][3]=data[i][h][3].replace(/\"/,"");

                }
                }
                alert(data[0][0][0]);
            }

        ); 
alert(data[0][0][0]);

if you are suffering a similar problem the following How to return the response from an AJAX call? has the definitive explanation and answer.

In addition to the duplicate above explaining how to deal with the problem, it is worth pointing out that `function(data) {` creates a new local variable called `data` that masks the one from the wider scope. — Quentin, Jun 07 '13 at 13:25
@quentin, so is window.data=data; the way to go for that problem? — EnglishAdam, Jun 07 '13 at 13:27
@Gamemorize: As long as you access `window.data` *after* the response was received it would work. — Felix Kling, Jun 07 '13 at 13:29
@Gamemorize — No, since you still have the async issue. See the answers on the duplicate question. Use a callback. — Quentin, Jun 07 '13 at 13:29
or use a promise if you want to be able to pass the response around to other functions without tearing your hair out passing context and callbacks deep into a pyramid of despair — Andbdrew, Jun 07 '13 at 13:30

score 1 · Answer 1 · answered Jun 07 '13 at 13:26

The reference data in the function parameter and outside the function are different variables. In first case, it is in global scope, and in the second it in the local scope..They are completely different.

The example illustrates the issue....

    var data=2;//this
    function fun(data){ //and this are different
              alert(data);
     }
     var data2=3;
     fun(data2);

Andbdrew · Answer 2 · 2013-06-07T13:49:37.060

As pinkpanther noted, the local data variable inside your $.post callback is not the same variable as the data variable outside the function.

Additionally, since $.post is asynchronous, you need to either pass it a callback or use the deferred object that it returns to access the response.

$.post('matchEngine.php').then(function(data){alert(data)})

for example, if you want to be able to pass the response around to other functions, you can do something like:

function doPost(url){
    return $.post(url);
}

function processResponse(response) {
    alert(response);
}

responsePromise = doPost("matchEngine.php");
responsePromise.then(processResponse);

As an aside, I recommend using $.ajax instead of $.post if you are going to use the callback style instead of promises. The reason being that $.ajax provides an error callback while $.post does not.

score 0 · Answer 3 · edited Jun 07 '13 at 13:40

0

You can try this:

var data = [];
var myRequest = $.post(
    /* your stuff */
); 
myRequest.done(function() { alert(data[0][0][0]); })

edited Jun 07 '13 at 13:40

WouterH

1,345
10
16

answered Jun 07 '13 at 13:35

scraaappy

2,830
2
19
29

Javascript Scope: variable not defined

3 Answers3