How to Convert CSV to JSON in JavaScript

Converting CSV (Comma Separated Values) data to JSON (JavaScript Object Notation) is a common task in web development, especially when working with data import/export or API integrations. CSV is a widely used format for tabular data, while JSON is a lightweight and easy-to-parse data interchange format. In this guide, we'll explore how to convert CSV to JSON in JavaScript, covering the basics, handling edge cases, common mistakes, and performance tips.

Quick Example

const csv = `name,age,city
John,30,New York
Alice,25,San Francisco
Bob,40,Chicago`;

const jsonData = csvToJSON(csv);

console.log(jsonData);
// Output: [{ name: 'John', age: '30', city: 'New York' }, { name: 'Alice', age: '25', city: 'San Francisco' }, { name: 'Bob', age: '40', city: 'Chicago' }]

function csvToJSON(csv) {
  const rows = csv.split('\n');
  const headers = rows.shift().split(',');
  return rows.map(row => {
    const obj = {};
    row.split(',').forEach((value, index) => {
      obj[headers[index]] = value;
    });
    return obj;
  });
}

This code takes a CSV string as input, splits it into rows, extracts the headers, and maps each row to an object using the headers as keys.

Step-by-Step Breakdown

Let's walk through the code:

const rows = csv.split('\n');: Split the CSV string into an array of rows using the newline character (\n) as the separator.
const headers = rows.shift().split(',');: Extract the first row (headers) and split it into an array of column names using the comma (,) as the separator.
return rows.map(row => { ... });: Map each row to an object using the map() method.
const obj = {};: Initialize an empty object for each row.
row.split(',').forEach((value, index) => { ... });: Split the row into an array of values using the comma (,) as the separator, and iterate over each value using forEach().
obj[headers[index]] = value;: Assign each value to the corresponding header in the object.
return obj;: Return the object for each row.

Handling Edge Cases

Empty/Null Input

function csvToJSON(csv) {
  if (!csv) return []; // or throw an error
  // ...
}

Handle empty or null input by returning an empty array or throwing an error.

Invalid Input

function csvToJSON(csv) {
  if (typeof csv !== 'string') {
    throw new Error('Input must be a string');
  }
  // ...
}

Validate the input type to ensure it's a string.

Large Input

function csvToJSON(csv) {
  const chunkSize = 100;
  const rows = [];
  for (let i = 0; i < csv.length; i += chunkSize) {
    rows.push(csv.slice(i, i + chunkSize));
  }
  // ...
}

Split large input into smaller chunks to avoid performance issues.

Unicode/Special Characters

function csvToJSON(csv) {
  const rows = csv.split('\n');
  const headers = rows.shift().split(',');
  return rows.map(row => {
    const obj = {};
    row.split(',').forEach((value, index) => {
      obj[headers[index]] = decodeURIComponent(value); // decode special characters
    });
    return obj;
  });
}

Use decodeURIComponent() to decode special characters in the input.

Common Mistakes

1. Not Handling Empty Input

// Wrong
function csvToJSON(csv) {
  const rows = csv.split('\n');
  // ...
}
// Correct
function csvToJSON(csv) {
  if (!csv) return []; // or throw an error
  const rows = csv.split('\n');
  // ...
}

2. Not Validating Input Type

// Wrong
function csvToJSON(csv) {
  const rows = csv.split('\n');
  // ...
}
// Correct
function csvToJSON(csv) {
  if (typeof csv !== 'string') {
    throw new Error('Input must be a string');
  }
  const rows = csv.split('\n');
  // ...
}

3. Not Handling Large Input

// Wrong
function csvToJSON(csv) {
  const rows = csv.split('\n');
  // ...
}
// Correct
function csvToJSON(csv) {
  const chunkSize = 100;
  const rows = [];
  for (let i = 0; i < csv.length; i += chunkSize) {
    rows.push(csv.slice(i, i + chunkSize));
  }
  // ...
}

Performance Tips

1. Use `split()` Instead of Regular Expressions

// Slower
const rows = csv.match(/[\r\n]+/);
// Faster
const rows = csv.split('\n');

2. Use `map()` Instead of Loops

// Slower
const jsonData = [];
for (let i = 0; i < rows.length; i++) {
  const obj = {};
  // ...
  jsonData.push(obj);
}
// Faster
const jsonData = rows.map(row => {
  const obj = {};
  // ...
  return obj;
});

3. Use `decodeURIComponent()` Instead of `JSON.parse()`

// Slower
const value = JSON.parse(`"${value}"`);
// Faster
const value = decodeURIComponent(value);

FAQ

Q: What is the difference between CSV and JSON?

A: CSV is a text format for tabular data, while JSON is a lightweight data interchange format.

Q: How do I handle empty or null input?

A: Return an empty array or throw an error.

Q: How do I handle large input?

A: Split the input into smaller chunks to avoid performance issues.

Q: How do I handle special characters in the input?

A: Use decodeURIComponent() to decode special characters.

Q: What is the best way to optimize performance?

A: Use split() instead of regular expressions, map() instead of loops, and decodeURIComponent() instead of JSON.parse().

How to Convert CSV to JSON in JavaScript