How to Read a CSV file into a 2D array in JavaScript?

Question

I have a huge .csv file. It has about 130,000 rows and 13 columns. I need to create a bunch of graphs using that data in a web app. I am very new to JavaScript. Can anyone help me reading this huge file and store the data into a 2D array?

Possible duplicate of [reading from file into 2D array](https://stackoverflow.com/questions/35757842/reading-from-file-into-2d-array) — beefoak, Oct 18 '18 at 16:42
Try using a library, makes things easier, `https://github.com/evanplaice/jquery-csv` — Abhishek Kumawat, Oct 18 '18 at 16:44
I tried that. But my file is huge and that library does not support over 10,000 rows. :( — Pratik Patel, Oct 18 '18 at 16:45
There are lots of packages on npm, have you tried any?? Example `https://www.npmjs.com/package/csv` — Abhishek Kumawat, Oct 18 '18 at 16:52

score 0 · Answer 1 · answered Oct 18 '18 at 16:48

0

I think you can use this lib http://c2fo.io/fast-csv or https://www.papaparse.com/

this libs use streams, and you can use huge file and modify each line

answered Oct 18 '18 at 16:48

Alona Honcharova

46
3

I have tried fast-csv. but it gives a compiler error, saying - createReadFile is not a function – Pratik Patel Oct 18 '18 at 16:52
Do you want load csv to client side? It's bad idea. You need send it to backend and parse there – Alona Honcharova Oct 19 '18 at 17:07

score 0 · Answer 2 · answered Oct 18 '18 at 16:56

0

If you are working on a node app, try looking for packages on npm,

https://www.npmjs.com/search?q=csv

Else, you might want to take a look at the following link for core javascript code:

How to read data From *.CSV file using javascript?

answered Oct 18 '18 at 16:56

Abhishek Kumawat

780
1
10
25

khalid · Answer 3 · 2018-10-19T12:31:28.917

This code will help you:

 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// Reading csv data from file using get ou post or whateven protocol
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {
            var lines = processData(data);
            console.log(lines);
        }
    });
});

// Passing csv data direct from text string
csv = "heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2";
var lines = processData(data);
console.log(lines);


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

    for (var i=1; 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);
        }
    }
    return lines;
}
 </head>

Note: this code needs jquery to make an ajax request or you can change it to a pure javascript ajax request. — khalid, Oct 18 '18 at 17:07
Failed to compile. ./src/App.js Line 4: '$' is not defined no-undef Line 5: '$' is not defined no-undef — Pratik Patel, Oct 18 '18 at 17:38

How to Read a CSV file into a 2D array in JavaScript?

3 Answers3