Get resultfrom AJAX call into javascript variable

Question

I have been trying to find a solution to this for a while now but i can not seem to get it to work.

What i am doing: I am trying to get a array from my php file so i can use it in my javascript.

Example.php

$arr =  Array(
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(3,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(3,3,3,3,3,3,0,0,0,0,1,0,0,0,0,0,3,3,3,3,3,0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
            Array(0,3,3,3,3,3,3,0,0,0,1,0,0,0,3,3,3,3,3,0,0,0,0,0,3,3,0,1,1,1,1,1,1,1,0,0,0,0,0,0),
            Array(0,0,0,0,0,0,3,3,3,3,1,3,3,3,3,3,0,0,0,0,0,0,0,0,0,3,3,1,3,3,3,3,3,1,1,1,1,0,0,0),
            Array(0,0,0,0,0,0,0,3,3,3,1,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,3,1,3,3,3,3,3,3,3,3,1,0,0,0),
            Array(0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,3,3,3,1,1,0,0),
            Array(0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,3,3,1,1,1),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,3,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,3,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,1,3,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,3,3,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,3,3,3,3,3,3,3,3,3,3),
            Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,3,3,3,3,3,3,3,3,3,3)
           );

echo json_encode($arr);

And i am calling this with a javascript function

function getArray(){
       $.ajax({
           url: 'Example.php',
           success: function(resultarray) {
                alert("success " + resultarray);
                return levelarray;
           },
           error: function(xhr, status, error) {
                //alert(xhr.responseText);
           }
      }); 
 }

This alert("success " + resultarray); does return the array like it should.

But when i want to use it in my javascript it keeps saying it is undefined, or it does not say anything.

I tried it like this:

var test = getArray();
alert("result= "+ test);

So this Alert keeps returning me errors or empty values.

Does anyone know how i can do this?

Thank you in advance.

Because AJAX is [*Asynchronous*](http://stackoverflow.com/questions/3393751/what-does-asynchronous-means-in-ajax). The code is still getting executed while waiting for the server to send it's message back. That's why you need to do things inside `success`. — Spencer Wieczorek, Jan 20 '15 at 15:31

score 1 · Answer 1 · answered Jan 20 '15 at 15:34

if you want to use the success result in another js function, put that function inside the success() of the ajax. ajax runs asynchronous, so it doesnt run in sequential order with other functions. just do something like:

$.ajax({
    url: 'Example.php',
    success: function(data) {
        // myFunction(), do something here with data from ajax;
    },
});

score 1 · Accepted Answer · answered Jan 20 '15 at 15:36

This is related to the asynchronous nature of javascript. Instead of using your function like

var test = getArray();

Try something along the lines of

function getArray(){
   $.ajax({
       url: 'Example.php',
       success: function(resultarray) {
            alert("success " + resultarray);
            doSomethingWithMyTiles(resultarray);
       },
       error: function(xhr, status, error) {
            //alert(xhr.responseText);
       }
  }); 
 }

with

function doSomethingWithMyTiles(resultarray){
 //do stuff

}

Get resultfrom AJAX call into javascript variable

2 Answers2