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"

Community · Accepted Answer · 2017-05-23 10:27:54Z

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, 2017 at 10:27

CommunityBot

11 silver badge

answered Nov 9, 2013 at 10:53

Tasos K.

8,1057 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dbf Over a year ago

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.

Marvin Smit Over a year ago

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

Tasos K. Over a year ago

@MarvinSmit is right about this. I am editing my code snippet for clarity

Beezle-Bug Over a year ago

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...

Collectives™ on Stack Overflow

CSV-import via jquery - variable locked in

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related