Javascript with AJAX inside another function

Question

Javascript with AJAX inside another function

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/

From this example, instead of placing the first 19 points with random values, I want to pass a value from my server through AJAX.

And I am talking about the code here.

series: [{
    name: 'Random data',
    data: (function () {
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -19; i <= 0; i += 1) {
            data.push({
                x: time + i * 1000,
                y: Math.random()
            });
        }
        return data;
    }())
}]

And since the key of series is also data I have no idea how I am gonna get data from AJAX GET call.

The AJAX call that I want to use is:

$.ajax({
    type: "GET",
    url: "/getData",
    success: function(data) {
        var y1 = data.count;
        series.addPoint([x, y1], true, true);
    }
});

But I tried to use this but it does not seem to work, like the following:

series: [{
    name: 'Random data',
    data: (function () {
        var data1 = [],
            time = (new Date()).getTime(),
            i;
        $.ajax({
            type: "GET",
            url: "/getData",
            success: function(data) {
                var y1 = data.count;
                for (i = -19; i <= 0; i += 1) {
                    data1.push({
                        x: time + i * 1000,
                        y: data.count
                    });
                }
            }
        });
        return data1;
    }())
}]

Please let me know how to GET for the Highchart data

Answer 1

First off see this reference for why you can't return data from your outer function like you're trying to:

How do I return the response from an asynchronous call?

Then, understanding that you will have to use the data from the success handler, that means that you will have to move the ajax call outside of the data declaration and do it afterwards, but you will have to recognize that the data will NOT be available until sometime later when the ajax call finishes. You cannot use it immediately. If you need to know when the data is available, then put the data into the data structure and call some other function from the success handler.

Answer 2

Like they said the AJAX call is async = not blocking, it means that the browser is making the ajax call in your function and instantly goes on at the next line, in your case return data1 but the data1 var is not updated since the ajax call is still being executed.

Documentation: http://api.jquery.com/deferred.done/

There are also some things I don't understand in your code, did you try to lint hit with JSHint or JSLint?, here is my version with some corrections:

// define var outside of function so they are not scoped
var time = (new Date()).getTime(),
    data1,series;
$.ajax({
    type: "GET",
    url: "/getData",
    success: function(data) {
        // since you are using i only here just define it in the cycle
        for (var i = -19; i <= 0; i += 1) {
            data1.push({
                x: time + i * 1000,
                y: data.count
            });
        }
    }
}).done(function() {
    series = {
        name: 'Random data',
        data: data1
    };
});