CSV-import via jquery - variable locked in

Question

i use a nice code to import csv data. However, my variable seems to be somehow caught within the function so i cannot access it from other places in my .js ...

see my two alert functions in the code below.

Code copied from post(How to read data From *.CSV file using javascript?)

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "../recipes.csv",
        dataType: "text",
        success: function (data) {
            processData(data);
        }
    });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i = 0; i < allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j = 0; j < headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    dataArray = (lines + "").split(';');

    alert(dataArray[1]); // here it works
}
alert(dataArray[1]); // here it doesn't work: "ReferenceError: dataArray is not defined"

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

The dataArray variable that the function processData(...) uses exists only inside the function.

In order to use it outside the function you need to declare it. For example:

var dataArray = {};

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=0; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {
            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    dataArray = (lines + "").split(';');

    alert(dataArray[1]); 
}

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "../recipes.csv",
        dataType: "text",
        success: function (data) {
            processData(data);
            alert(dataArray[1]); // here it will return the data from processData(...)
        }
    });
});

What is the scope of variables in JavaScript?. Here is an interesting thread for variable scope in JavaScript.

edited May 23 '17 at 10:27

Community

1
1

answered Nov 09 '13 at 10:53

Tasos K.

7,979
7
39
63

And how to obtain the processed data in `var dataArray = {};`, as you proposed, from the function `processData`? This still leaves `dataArray` with an empty object. – dbf Nov 09 '13 at 10:56
1

Looking @ OP: this is the right remark, but will still output undefined since the ajax post is not finished (*returned) before the first alert is called – Marvin Smit Nov 09 '13 at 10:59
@MarvinSmit is right about this. I am editing my code snippet for clarity – Tasos K. Nov 09 '13 at 11:01
just for a better understanding. is there also a way to cascade upwards when declaring a variable? like writing ".parent var dataArray = {}"? I have a new case where i'm defining the variable names based on the header line of the imported csv. Thus, i cannot hardcode the variable names before... – Beezle-Bug Nov 09 '13 at 13:10

CSV-import via jquery - variable locked in

1 Answers1