agon024 agon024 - 1 month ago 13
jQuery Question

jQuery/JavaScript - Converting CSV to Array

I am trying to to convert a CSV file into a javascript array.

Here is my code:

var segments = {
'Segment_1':'inves_cast',
'Segment_2':'foreged_prod',
'Segment_3':'air_prod',
'Segment_5':'worldwide',
'Segment_6':'structurals'
};

var divisions = {
'Division_1':'structurals',
'Division_2':'airfoils',
'Division_3':'wyman',
'Division_4':'energy',
'Division_5':'fasteners',
'Division_6':'struc_comp',
'Division_7':'mech_hard',
'Division_8':'engine_prod',
'Division_9':'corp',
'Division_10':'aero',
'Division_11':'timet',
'Division_12':'',
'Division_13':'spec_metals',
};

var csv = $.get('/path/to/locations.csv');

console.log(csv);

var locationArray = transformLocationData(csv);

function transformLocationData(obj) {
var lineArray = [];
if(obj && obj.data) {
var text = (data.responseText);
lines = text.split('\n');
for(var line in lines) {
var lineTokens = line.split(',');
lineArray = [
lineTokens[0],
lineTokens[1],
lineTokens[3],
lineTokens[4],
lineTokens[5],
lineTokens[6],
lineTokens[11],
lineTokens[12],
lineTokens[13],
lineTokens[14],
lineTokens[15],
segments['Segment_' + lineTokens[8]],
divisions['Division_' + lineTokens[9]]
];
}
}
console.log(lineArray);
}


So what I am trying to do is us AJAX to get the csv file and then split the "responseText" first by line and Second loop through those lines and split it up by commas and then create an array based on those line numbers.

Here is a picture of the data I am getting back from the AJAX call:
enter image description here

With the last console log (
console.log(lineArray);
) it returns an empty array or really it just returns the data the is in
var lineArray = [];
which is empty if I populate it with data
var lineArray = ["Lexus", "Audi", "BMW"];
It will return that array.

Here is a plunker with all the code: https://plnkr.co/edit/CoZGfr6S9R5LDqR1drzq

I know I am doing something wrong but cant seem to get it. I'm not familiar with doing this kind of thing so any help would be greatly appreciated.

Answer

You are replacing lineArray with a new array every time, and you're only logging the array at the end of the loop. Perhaps the CSV has an empty line at the end.

If you're wanting an array of arrays, do this instead:

var lineArray = [];
if(obj && obj.data) {
    var text = (data.responseText);
    lines = text.split('\n');
    for(line in lines) {
        var lineTokens = line.split(',');
        lineArray.push([
            lineTokens[0],
            lineTokens[1],
            lineTokens[3],
            lineTokens[4],
            lineTokens[5],
            lineTokens[6],
            lineTokens[11],
            lineTokens[12],
            lineTokens[13],
            lineTokens[14],
            lineTokens[15],
            segments['Segment_' + lineTokens[8]],
            divisions['Division_' + lineTokens[9]]
        ]);
    }
}
console.log(lineArray);

Update:

In addition, you're not handling the results from the Ajax request properly. This line:

var csv = $.get('/path/to/locations.csv');

...does not return the CSV. Rather, it returns a Promise (sort of...). So you cannot parse csv like that. Rather, wait for the results. Change your code to:

$.get('/path/to/locations.csv').then(function (csv) {
  var locationArray = transformLocationData(csv);
}).catch(function (err) {
  // Handle errors
});

As @vlaz alluded to, you'll also want to change your loop from for..in to a regular for loop:

for (var i = 0; i < lines.length; i++) {
  var line = lines[i];
  // ...
}