variable scope issue in jQuery post method

Question

I am trying to get some information from Database and make a chart with them. Unfortunately, the variables I use to store that values are losing their data outside of POST. completed and ongoing are assigned inside their POST methods, also each other's post methods, but not outside of it. When data2 executes, the variables become empty again. How can I fix this issue?

var completed;
var ongoing;

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
);

var data2 = [
    {
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: 700, //ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }
]

score 1 · Accepted Answer · edited May 23 '17 at 11:58

This is due to the AJAX requests being asynchronous, not due to variable scope. For a full explanation of the issue, see the answers in this question. To solve the problem in your specific case, you can use the $.when calback to create your data2 object after both AJAX calls have completed. Try this:

var completed;
var ongoing;
var requests = [];

requests.push($.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
));

requests.push($.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
));

$.when.apply(this, requests).done(function() {
    var data2 = [{
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }];

    // add further logic which relies on data2 here...
});

Note that this approach is quicker than nesting AJAX calls as they will run in parallel, rather than in a chain. Therefore the user will only be waiting as long as the slowest request.

rrk · Answer 2 · 2015-07-14T15:07:06.713

$.post() is an AJAX call and it is supposed to be asynchronous so your POST calls did not have any effect on the array creation line because that was executed before AJAX were complete.

var data2 = [];

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[0] = {
            value: completed,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Completed"
        }
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[1] = {
            value: 700, //ongoing,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Ongoing"
        }
    }
);

Or you can do only one ajax call because the second one cause the same output all the time.

score 0 · Answer 3 · answered Jul 14 '15 at 14:56

0

this fix the problem:

before the ajax define your data2 as array

inside the first function do

function (data) {
    data2.push({
         value: data,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    });
}

and this for the second

function (data) {
    data2.push({
         value: data,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    });
}

answered Jul 14 '15 at 14:56

Vanojx1

5,574
2
23
37

But how do you know when both AJAX requests have completed and that `data2` is filled with all required data? – Rory McCrossan Jul 14 '15 at 14:56
so use the $.when.apply method as shown in the next answer... seems to be clear :) – Vanojx1 Jul 14 '15 at 15:03

variable scope issue in jQuery post method

3 Answers3