need to store ajax response to a global variable

Question

I am using ajax to get some values from a database. In my java script file I have a global variable that some functions need to access it. I need to fill that variable from the values from the database. When I use ajax then the variable stays empty. If I use the async:false in my ajax code I get that warning message in my browser's dev tools:

jquery-3.2.1.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Moreover using the above it doesn't fill the variable resulting to errors in the other functions. Plus, from what I read this is deprecated and should not be used in any circumstances.

my code

var array ={};
var flag = 'true';
        $.ajax({
            url: "name.php",
            method: "post",
            data:{flag:JSON.stringify(flag)},
            success: function(data) {
                array = JSON.parse(data);

            },
             async: false,
            error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError);
            }
        });

What, basically I'm trying to do, is to fill the array variable and make it an proper array.

the data from the the database is like this

{ 'something': { 'act1': 'act1a','act2': 'act2a'}, 'something2': { 'act1': 'act1a','act2': 'act2a'} }

anyone have any suggestions on how to achieve that?

PS: I need to fill a variable with the ajax response which will be accessible by other functions... not Convert a JSON Object into Javascript array...Im retrieving the data in string format

Answer 1

Based on your question and code, I think you are trying to access your array object before it is loaded with data. First of all, you will need to remove async:false. You want this to be asynchronous. That's the nature of ajax. Secondly, make sure you "do stuff" with array after the ajax call completes. For example, this will not work:

var array ={};
var flag = 'true';
$.ajax({
    url: "name.php",
    method: "post",
    data:{flag:JSON.stringify(flag)},
    success: function(data) {
        array = JSON.parse(data);
    },
    error: function(xhr, ajaxOptions, thrownError) {
        console.log(thrownError);
    }
});
//DO STUFF WITH array here.. will not work

But this will work:

var array ={};
var flag = 'true';
$.ajax({
    url: "name.php",
    method: "post",
    data:{flag:JSON.stringify(flag)},
    success: function(data) {
        array = JSON.parse(data);
        //DO STUFF WITH array here..
    },
    error: function(xhr, ajaxOptions, thrownError) {
        console.log(thrownError);
    }
});

One more thing to consider here - It's common practice to create a function outside your ajax success function to do something with your data (array), and call that function from inside your success function:

var array ={};
var flag = 'true';
$.ajax({
    url: "name.php",
    method: "post",
    data:{flag:JSON.stringify(flag)},
    success: function(data) {
        array = JSON.parse(data);
        doStuffWithArray(array);
    },
    error: function(xhr, ajaxOptions, thrownError) {
        console.log(thrownError);
    }
});

function doStuffWithArray(myArray) {
    //DO STUFF HERE...
}

Answer 2

So lets say you have an ajax call that you are making to and endpoint, whose response you may want to use at a later time, not immediately upon the success of the ajax call, for whatever reason. One way to do that is to pass around the promise/deferred that the $.ajax method returns. With this object you can attach any of the promise/deferred methods for handling the resolution or rejection of the promise. For instance:

//first we'll create a dummy deferred.  we will pretend that this is our ajax call.  in actual code this would look something like
//var dummyDeferred = $.ajax(...);
var dummyDeferred = $.Deferred();

//lets say, maybe you do want something to happen immediately upon the request success.  you can do that.
dummyDeferred.then(function(data){
  console.log("immediate then", data);
});

//now lets say that the ajax finishes, you should see the console log as you'd expect from the above then()
dummyDeferred.resolve("hello!");

//now lets say that some time later, you want to use that result inside another method to do something.  to do that you can simply attach another then() to the promise/deferred
//we'll use a timeout to simulate later usage of the promise/deferred
setTimeout(function(){
  doOtherStuff(dummyDeferred);
}, 5000);

function doOtherStuff(promise) {
  //maybe you want to take the data response and put it on the page some how.  you can!
  promise.then(function(data){
    $(document.body).append(data);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

var array;
var flag = 'true';
        $.ajax({
            url: "name.php",
            method: "post",
            data:{flag:JSON.stringify(flag)},
            success: function(data) {
                array = JSON.parse(data);
                function_ThatNeeds_Thearray();

            },
             async: false,
            error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError);
            }
        });