Can not push to javascript global array varible

Question

I'm trying to add data to a global array variable in my ready function. When i later try to use the data my array is empty.

This is my ready function:

var counter = 0;
    var services = [];
    var names = []
    var serviceData = []
    $(document).ready(function () {
        $.getJSON(JSurl + "/Home/getServicesForCustomer?name=" + '@Model', function (data) {
            $.each(data, function (index, value) {
                console.log("Trying to push services : " + JSON.parse(value.jsonTEMPLATE).komponent);
                services.push(JSON.parse(value.jsonTEMPLATE).komponent);
                console.log("After push : " + services);
                names.push(value.Name);
                serviceData.push(value.jsonDATA);

            });
        });
        drawKomp(0);
    });

This is the function where i want to use my data.

function drawKomp(index) {
        console.log("Services in draw" + services);
});

This is the log

Services in draw NewCustomerWizard?name=Testkund:104
Uncaught TypeError: Cannot read property 'length' of undefined jquery-2.0.3.js:564
Trying to push services : [object Object],[object Object] NewCustomerWizard?name=Testkund:90
After push : [object Object],[object Object] NewCustomerWizard?name=Testkund:92
Trying to push services : [object Object],[object Object],[object Object] NewCustomerWizard?name=Testkund:90
After push : [object Object],[object Object],[object Object],[object Object],[object Object]

Why am i getting Cannot read? Seems like my data is added to the services array

Welcome to the world of asynchronous execution – Bojangles Mar 12 '14 at 09:45 — Bojangles, Mar 12 '14 at 09:45

score 2 · Accepted Answer · answered Mar 12 '14 at 10:03

As Bojangles mentioned, this is because your code is executed asynchronously.

When the JS Interpreter reaches the $.getJSON line, the browser sends a request to get the desired data. As soon as the server responds, your callback function gets invoked. But in the meantime, the interpreter reaches drawKomp(0), before the server responded.

As the ajax call takes some time, it would be insane if the interpreter would stop execution here. Thats why you provide a callback function.

So code execution looks like this:

Send request to JSUrl and remeber function(data){...} to be executed when you got data
call drawKomp(0)
.
.
.
ajax call finished, call function(data){...}

So you have to make sure, that drawKomp(0) does not get called before your data is pushed to your array.

score 1 · Answer 2 · answered Mar 12 '14 at 10:10

The easiest way to fix this would be:

$(document).ready(function () {
    $.getJSON(JSurl + "/Home/getServicesForCustomer?name=" + '@Model', function (data) {
        $.each(data, function (index, value) {
            console.log("Trying to push services : " + JSON.parse(value.jsonTEMPLATE).komponent);
            services.push(JSON.parse(value.jsonTEMPLATE).komponent);
            console.log("After push : " + services);
            names.push(value.Name);
            serviceData.push(value.jsonDATA);

        });
        drawKomp(0);
    });

});

This way, your drawKomp gets executed after the json is loaded and processed.

You can also work with Deferred objects, but that could get complicated.

Can not push to javascript global array varible

2 Answers2