Code working in console but not when loading website

Question

my code is working in the console, but not when loading the website.

function getData() {
    var a = [];
    d3.csv("../csv/master.csv").get(function (error, rows) {
        for (var i = 0; i < rows.length; i++) {
            a.push(rows[i]);
        }
    });
    return a; 
}
a = getData();
alert(a[0].agency);

Strangely, the variable a seems to be loaded by the website as I can call it in the console, but the alert throws an error.

("Uncaught TypeError: Cannot read property 'agency' of undefined")

When I call the exact same alert in the console, however, it works perfectly.

Any ideas?

Thanks,

Jonas

Answer 1

The d3.csv method issues an asynchronous request, so it is possible that in the website version, the csv file hasn't been fully loaded yet when you try to access the data. You should probably reorganize your code and put the logic that depends on the data inside the callback function. You could also trigger an event when the data loading is done and have another object listening to that event to begin the drawing.

d3.csv('../csv/master.csv', function(error, rows) {
    // The data is available here
    alert(rows[0].agency);
});

More information about d3.csv in the docs.

EDIT: As @elclanrs pointed out, the previous code failed to explain that the posted code needs to be reorganized, so I updated the answer.