How to parse CSV data?

javascript

csv-parsing

javascript-utilities

data-processing

byAnton Shumikhin·Feb 19, 2025

Get an instant taste of CSV parsing with JavaScript split() and map() methods:

let csv = "id,name,age\n1,John,30\n2,Jane,25";
let rows = csv.split('\n').map(row => row.split(','));
console.log(rows); // [["id", "name", "age"], ["1", "John", "30"], ["2", "Jane", "25"]]

As simple as ABC, each row of the CSV is now an array within a larger array.

Handling complex cases

Easy CSVs are fun, but real-world data often come with extras like quoted fields or special characters. A sturdier approach can handle these:

function parseCSV(text) {
  let p = '', row = [''], ret = [row], i = 0, r = 0, s = !0, l;
  for (l of text) {
    if ('"' === l) {
      if (s && l === p) row[i] += l;
      s = !s;
    } else if (',' === l && s) l = row[++i] = '';
    else if ('\n' === l && s) {
      if ('\r' === p) row[i] = row[i].slice(0, -1);
      row = ret[++r] = [l = '']; i = 0; // "Keep it fresh. Let's start a new row, shall we?" 🍋
    } else row[i] += l;
    p = l;
  }
  return ret;
}

Why, yes. This is RFC4180 compliance for CSV format, at your service.

Adapting to custom formats

What if your CSV is a bit particular, with a different field separator or a pesky header. Nothing a little flexibility can't solve:

function parseCSV(text, delim = ',', omitFirstRow = false) {
  return text.slice(omitFirstRow ? text.indexOf('\n') + 1 : 0).split('\n').map(v => v.split(delim));
}

Now embracing some good old semicolon separation. Headers? Not an issue.

Real-world integration

For a more powerful CSV parsing experience, consider a library such as Papa Parse or jQuery-CSV. Bonus perks include functions to turn the data back into CSV and custom processing of fields.

Usage with Web APIs

As an aspiring web developer, couple your CSV parsing with the Fetch API:

fetch('path/to/myFavorite.csv')
  .then(response => response.text())
  .then(text => {
    const data = parseCSV(text);
    console.table(data); // "Voila! Your CSV is now a fancy console table" 🎩🐇
  })
  .catch(error => console.error(error)); // Just in case, we're prepared for rainy days. ☔

API? Asyc? Streaming? All under the same roof.

Approaching large datasets

But what if my CSV is humongously big? A stream, my friend:

const { createReadStream } = require('fs');
const { parse } = require('csv-parse');

createReadStream('myBigFile.csv')
  .pipe(parse({ columns: true }))
  .on('data', (row) => {
    // The row is hot and ready! 🍕
  })
  .on('end', () => {
    // "END OF TAPE. Please rewind" ⏪
  });

Tools recommendation

Plugins and libraries such as jQuery-CSV and Papaparse can turn your CSV handling task into a smooth ride. Look for community trust signs like numerous positive reviews.