jquery global variable ajax returns null

Question

Created a fiddle for this as it is so simple but yet it doesn't work;

var url = 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json';

function getData (url) {
    return $.ajax({
        'type': "POST",
        'url': url
    });
};
$(document).ready(function(){
    var a = null;

    getData(url).done(function(data){ a = data; });

    alert(a);
 });

early morning perhaps?

Fiddle: https://jsfiddle.net/nextgenmappinginc/r88356tu/

Goal:

I have multiple local files which contain geojson data. Which I will be returned to me as an array. I want to loop through these create objects and push these objects into an array. Then from the new array created by all of these ajax calls. I want to pass this array to a function that will execute open layers code.

updated and completed different fiddle

https://jsfiddle.net/nextgenmappinginc/x1yasngy/

But. Problem remains. Even when you pass through ASYNC The function is only fired upon request. Then it remains in the function. So technically why can't it pass it to another function that can then console it?

In the fiddle you can simply change the urls so that you can get request response

//var url = 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json';
var url = {url : 'clientData/10BC99F2-05FD-4847-A277-2979C83BB42A/geojson/E36CC45E-C1B8-4C26-A714-EBA91ACE7C1C.js'}
var files = [];
files.push(url);

function getData (files) {
    var fileObjects = [];
    for (i=0; i<files.length; i++){
        $.ajax({
            'type': "GET",
            'url': files[i].url,
            success: function (response){
                fileObjects.push(response);
            }
        });
    }
    consoleMe(fileObjects);
}

function consoleMe(data){
    console.log(data);
}

getData(files);

`getData` makes an `ajax` call. Ajax is, by definition, [asynchronous](http://www.dictionary.com/browse/asynchronous) so your `alert(a)` runs before the ajax call has even started. — freedomn-m, Sep 20 '17 at 07:54
I apologize but I don't understand async vs just a simple call? Even if I wrap with a call back function it doesn't work. See new fork https://jsfiddle.net/nextgenmappinginc/x9ypefpx/ — NextGenDevelopment, Sep 20 '17 at 07:58
Found in the linked: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?noredirect=1&lq=1 Amazing article / response. Thank you Edited Post with goal — NextGenDevelopment, Sep 20 '17 at 08:15
Although Pankaj answered a way for me to get access to the data. He did not understand directly the question I had. For this I cannot mark it as correct. I will mark roman's answer correct. Though maybe an explanation how to achieve my end goal would be appreciated. — NextGenDevelopment, Sep 20 '17 at 08:19
I've updated your fiddle to show what is happening vs what you appear to be expecting: https://jsfiddle.net/r88356tu/1/ In your code, `a = data;` is the *last* code to run, it runs **after** `alert(a)` which is why it is still `null` on the alert. You'll find it easier to use `console.log` rather than alert as alert interrupts the program flow so the async may complete sooner. — freedomn-m, Sep 20 '17 at 08:33
Think of your `$.ajax` request as sending some post (not email, real post). You post your letter and carry on with your life - sometime in the future that letter will arrive. Your `alert(a)` is the "carry on with life" part - the letter hasn't arrived yet and `a` will only be updated once the letter arrives. — freedomn-m, Sep 20 '17 at 08:35
Understood. Please see my new fiddle Also @freedomn-m your fiddle 4 is not even present :) — NextGenDevelopment, Sep 20 '17 at 08:38
Yes, because it never gets the response back from the ajax call. You can try with a working (for you) url - that was the url in the original fiddle. — freedomn-m, Sep 20 '17 at 09:20

score 0 · Answer 1 · answered Sep 20 '17 at 07:56

0

add async:false, in your ajax code. Remove this line

getData(url).done(function(data){ a = data; });

and add below line

getData(url).done(function(data){ a = data; });

Try below example this will work for sure

var url = 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json';

function getData (url) {
    return $.ajax({
        'type': "POST",
        async:false,
        'url': url
    });
};
$(document).ready(function(){
    var a = null;

    a = getData(url);
console.log(a);
    alert(a);
 });

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

answered Sep 20 '17 at 07:56

Pankaj Makwana

3,030
6
31
47

Thank you. While this resolves my issue of why I don't have access to the variable. This gives me access to the whole request. Thank you for your response. But not what I was looking for. – NextGenDevelopment Sep 20 '17 at 08:18
Please don't use `ajax:false`. It will freeze the browser. – freedomn-m Sep 20 '17 at 08:24
@freedomn-m I read this in another article as well. The Linked article did a wonderful job. explaining async. However still a little hazy – NextGenDevelopment Sep 20 '17 at 08:28

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You want to "get" data but you do a post request to the API. Secondly .done is an asynchronous function. It will be execute when the API sends you the data.

Code

var url = 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json';

function getData (url) {
    return $.ajax({
        'type': "get",
        'url': url
    });
};

$(document).ready(function(){
    getData(url).done(function(data){ 
        // here you have access to data
        alert(data)
    });
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 20 '17 at 07:58

Roman

4,922
3
22
31

Roman. I understand I have access to the data in the done or success function. However I want to do other things with the data rather than just simply have access to it there. When I set the variable. it is set. then the console or alert comes up null then I console after page load and it's set. – NextGenDevelopment Sep 20 '17 at 08:00

jquery global variable ajax returns null

2 Answers2

Code