Converting a CSV File Into a 2D Array

Question

How can i convert the data inside an CSV file to a 2d array?

array[row][column]

I already have an upload script that will display all the data inside a CSV file.

Little snippet of my code, here's the full code: http://jsfiddle.net/Meesz/wj6q7c30/

reader.onload = function (e) {
  var table = document.createElement("table");
  var rows = e.target.result.split("\n");
  for (var i = 0; i < rows.length; i++) {
    var row = table.insertRow(-1);
    var cells = rows[i].split(",");
    for (var j = 0; j < cells.length; j++) {
        var cell = row.insertCell(-1);
        cell.innerHTML = cells[j];
    }
  }
  var dvCSV = document.getElementById("dvCSV");
  dvCSV.innerHTML = "";
  dvCSV.appendChild(table);
}

score 15 · Accepted Answer · edited Jun 06 '16 at 09:08

15

Real answer: Use Papa Parse . Save yourself the hassle of escaped/quoted fields, fields with delimiters in them, variations in the CSV format, etc...

The "do it yourself" way: csvStr.split("\n").map(function(row){return row.split(",");})

edited Jun 06 '16 at 09:08

Eric Smekens

1,602
20
32

answered Oct 15 '15 at 18:49

Fabio Beltramini

2,441
1
16
25

2

The DIY way is a bad idea. Use a real parser. – Jonathan M Oct 15 '15 at 19:04
Agreed. You can only lead a horse to water though – Fabio Beltramini Oct 15 '15 at 19:09
You should use return in the map function. – Eric Smekens Jun 06 '16 at 08:30

gfullam · Answer 2 · 2017-11-28T14:39:36.560

Use `String.split()` and `Array.map()`

Because "the map() method creates a new array with the results of calling a provided function on every element in this array" (source: MDN), it is ~~ideally suited~~ somewhat suitable for creating a two dimensional array from a very basic CSV string that has already been converted into an array via the split() method.

function csvToArray (csv) {
    rows = csv.split("\n");

    return rows.map(function (row) {
     return row.split(",");
    });
};

// Hard-coded for brevity, but you can set this variable with FileReader
var csv = "the,quick,brown,fox\n" +
          "jumps,over,the,lazy,dog";

var array = csvToArray(csv);

console.log(array);

Open your console.

Update:

This basic solution falls apart if your cells contain quotes, commas or other escaped characters. To address more complex CSV strings, you'd have to implement a RegEx solution (see accepted answer to How can I parse a CSV string with Javascript?); and to support multiple common formats, you'd be better off just using a library.

Touché. You'd have to implement a RegEx test within the `map()` callback. And then it can get hairier from there. — gfullam, Oct 15 '15 at 19:07

score 3 · Answer 3 · answered Dec 05 '17 at 13:22

I needed something like this today so I found snippet originally done by by Bennadel and cleaned it up a bit also adding in edge cases.

/*
 *  shortened version of:
 *   http://www.bennadel.com/blog/1504-ask-ben-parsing-csv-strings-with-javascript-exec-regular-expression-command.htm
 *
 *  Supports columns that are quoted/non-quoted. Takes care of quoted columns that may also have \n's inside
 *  them instead of using a naive approach of split('\n')
 *
 *  @param csvString {string} CSV file of rows separated by new lines.  
 *  @param delimiter {string} delimiter used to split columns 
 *
 *  return {rows} Array of rows with columns containing parsed CSV data
 */

function CSVParse(csvString, delimiter = ",") {

  if (!csvString || !csvString.length)
    return [];

  const pattern = new RegExp(
   ( "(\\" + delimiter + "|\\r?\\n|\\r|^)" +
     "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
     "([^\"\\" + delimiter + "\\r\\n]*))"
   ), "gi"
  );

  let rows = [[]]; 
  let matches = false;

  while (matches = pattern.exec(csvString)) {

    const matched_delimiter = matches[1];
    const matched_cellQuote = matches[2];
    const matched_cellNoQuote = matches[3];

    /*
     * Edge case: Data that starts with a delimiter
     */
    if (matches.index == 0 && matched_delimiter)
      rows[rows.length - 1].push("");

    /*
     * Fix empty lines
     */
    if(!matches[2] && !matches[3])
      continue;

    if (matched_delimiter.length && matched_delimiter !== delimiter)
      rows.push([]);

    const matched_value = (matched_cellQuote)
      ? matched_cellQuote.replace(
          new RegExp("\"\"", "g"), "\""
        )
      : matched_cellNoQuote;

    rows[rows.length - 1].push(matched_value);

   }

   return rows;
}

I think the only possible drawback is the accuracy of the regex. I needed a vanilla JS CSV parser to use in Google AppScript and I really didn't want to use a third party parser if possible. This is doing the job perfectly so far during testing: if I find any exceptions I'll just tweak the regex to cover anything that comes up. Looks solid so far though. — AutoBaker, Jul 19 '22 at 15:03
Just found an error that it won't parse `,,` (double comma) as a blank cell, the cell is removed altogther. — AutoBaker, Jul 22 '22 at 11:10

Paul Roub · Answer 4 · 2015-10-15T18:48:59.963

2

The logic is similar to (but simpler than) what you're already doing to display the results:

var data = [];
var rows = e.target.result.split("\n");

for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].split(",");
  data.push( cells );
}

var data = [];
var csv = "one,two,three\n" +
          "four,five,six";

var rows = csv.split("\n");

for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].split(",");
  data.push( cells );
}

console.dir(data);

edited Oct 15 '15 at 18:48

answered Oct 15 '15 at 18:43

Paul Roub

36,322
27
84
93

But how can i select one row and a column like here in JSP: http://stackoverflow.com/questions/33034833/converting-csv-file-into-2d-array/33035276?noredirect=1#comment53894097_33035276 – Mvz Oct 15 '15 at 18:49
Just like you'd think: `data[1][2]` would be the third column in the second row. – Paul Roub Oct 15 '15 at 18:51
What if the row is `"Hello, how are you","Smith,John",34`? – Jonathan M Oct 15 '15 at 19:00
2

Then see Fabio's answer, and get a real CSV parser. – Paul Roub Oct 15 '15 at 19:02
Then declare `data` outside the function, populate it in the function, and use it wherever you like. – Paul Roub Oct 15 '15 at 19:05

Converting a CSV File Into a 2D Array

4 Answers4

Use `String.split()` and `Array.map()`

Linked

Converting a CSV File Into a 2D Array

4 Answers4

Use String.split() and Array.map()

Linked

Use `String.split()` and `Array.map()`