CSV to JSON: How to Convert Tabular Data in Pure JavaScript (No Libraries)

CSV is everywhere — spreadsheets, data exports, API responses that somehow still use it. JSON is what your code actually wants. Here's how to convert between them in pure JavaScript, without installing anything.

Why CSV to JSON matters

CSV (comma-separated values) is simple and universal. JSON is structured and directly usable in JavaScript. The conversion problem shows up constantly:

• You export user data from a CRM as CSV and need to POST it to an API
• You get a data dump from a client as a spreadsheet and need to load it into a database
• You're reading a config file that someone wrote as CSV for some reason

The basic approach

A CSV file looks like this:

name,age,city
Alice,30,London
Bob,25,Paris
Carol,35,Berlin

The first row is headers. Every row after that is a record. Converting to JSON means turning each row into an object where the keys are the headers.

function csvToJson(csv) {
  const lines = csv.trim().split('\n');
  const headers = lines[0].split(',');

  return lines.slice(1).map(line => {
    const values = line.split(',');
    return headers.reduce((obj, header, i) => {
      obj[header.trim()] = values[i]?.trim() ?? '';
      return obj;
    }, {});
  });
}

Result:

[
  { "name": "Alice", "age": "30", "city": "London" },
  { "name": "Bob",   "age": "25", "city": "Paris"  },
  { "name": "Carol", "age": "35", "city": "Berlin" }
]

This works for simple cases. But CSV has edge cases that will break this.

The hard part: quoted fields

CSV values can contain commas if the value is wrapped in quotes:

name,address,city
Alice,"123 Main St, Apt 4",London

Split on comma breaks "123 Main St, Apt 4" into two pieces. You need a proper parser:

function parseCSVLine(line) {
  const values = [];
  let current = '';
  let inQuotes = false;

  for (let i = 0; i < line.length; i++) {
    const char = line[i];

    if (char === '"') {
      if (inQuotes && line[i + 1] === '"') {
        // Escaped quote inside quoted field
        current += '"';
        i++;
      } else {
        inQuotes = !inQuotes;
      }
    } else if (char === ',' && !inQuotes) {
      values.push(current.trim());
      current = '';
    } else {
      current += char;
    }
  }

  values.push(current.trim()); // last field
  return values;
}

Now use this instead of line.split(',').

Auto-detecting data types

Right now everything comes out as a string, even numbers. You probably want:

function coerceValue(val) {
  if (val === '' || val === null) return null;
  if (val === 'true')  return true;
  if (val === 'false') return false;
  const num = Number(val);
  if (!isNaN(num) && val !== '') return num;
  return val;
}

Apply this to each value after parsing:

obj[header.trim()] = coerceValue(values[i]?.trim() ?? '');

Now "30" becomes 30, "true" becomes true, and empty cells become null.

Handling different delimiters

Some CSV files use tabs, semicolons, or pipes instead of commas. A simple auto-detector:

function detectDelimiter(firstLine) {
  const counts = {
    ',':  (firstLine.match(/,/g)   || []).length,
    '\t': (firstLine.match(/\t/g)  || []).length,
    ';':  (firstLine.match(/;/g)   || []).length,
    '|':  (firstLine.match(/\|/g)  || []).length,
  };
  return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
}

Reading a CSV file from disk

In the browser, use the FileReader API:

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const csv = e.target.result;
    const json = csvToJson(csv);
    console.log(json);
  };
  reader.readAsText(file);
});

No server involved. No data uploaded. Everything runs in the browser.

Downloading the result

To let users save the JSON output:

function downloadJson(data, filename = 'output.json') {
  const blob = new Blob(
    [JSON.stringify(data, null, 2)],
    { type: 'application/json' }
  );
  const url  = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href     = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

Putting it all together

Here's the full working converter — paste it into an HTML file and open it:

<!DOCTYPE html>
<html>
<head><title>CSV to JSON</title></head>
<body>
  <textarea id="csv" rows="10" cols="60" placeholder="Paste CSV here..."></textarea>
  <br>
  <button onclick="convert()">Convert</button>
  <button onclick="download()">Download JSON</button>
  <pre id="output"></pre>

  <script>
    let result = [];

    function parseCSVLine(line, delimiter) {
      const values = [];
      let current = '';
      let inQuotes = false;

      for (let i = 0; i < line.length; i++) {
        const char = line[i];
        if (char === '"') {
          if (inQuotes && line[i + 1] === '"') { current += '"'; i++; }
          else inQuotes = !inQuotes;
        } else if (char === delimiter && !inQuotes) {
          values.push(current.trim());
          current = '';
        } else {
          current += char;
        }
      }
      values.push(current.trim());
      return values;
    }

    function coerce(val) {
      if (!val || val === '') return null;
      if (val === 'true')  return true;
      if (val === 'false') return false;
      const n = Number(val);
      return isNaN(n) ? val : n;
    }

    function convert() {
      const csv = document.getElementById('csv').value.trim();
      const lines = csv.split('\n').filter(Boolean);
      if (!lines.length) return;

      const delim = [',','\t',';','|']
        .map(d => [d, (lines[0].match(new RegExp('\\' + d, 'g')) || []).length])
        .sort((a,b) => b[1] - a[1])[0][0];

      const headers = parseCSVLine(lines[0], delim);
      result = lines.slice(1).map(line => {
        const vals = parseCSVLine(line, delim);
        return Object.fromEntries(headers.map((h, i) => [h, coerce(vals[i] ?? '')]));
      });

      document.getElementById('output').textContent = JSON.stringify(result, null, 2);
    }

    function download() {
      if (!result.length) return alert('Convert first');
      const blob = new Blob([JSON.stringify(result, null, 2)], {type:'application/json'});
      const a = Object.assign(document.createElement('a'), {
        href: URL.createObjectURL(blob), download: 'output.json'
      });
      a.click();
    }
  </script>
</body>
</html>

Common edge cases to handle

Edge case	What breaks	Fix
Commas in values	split(',')	Quoted field parser
Windows line endings (\r\n)	Extra \r in last field	.replace(/\r/g, '') before parsing
BOM character (Excel CSVs)	Corrupted first header	Strip  from start
Empty rows	Empty objects in output	Filter: lines.filter(Boolean)
Duplicate headers	Overwritten values	Append index suffix
Newlines inside values	Broken row splitting	Multi-line aware parser

When this approach is enough

For CSVs under a few MB, this pure-JS approach handles everything you'll hit in practice. For larger files (10MB+), consider streaming with Web Workers to avoid freezing the UI.

If you want a ready-built tool without writing code, SnappyTools has a CSV to JSON converter that runs entirely in your browser — no upload, no account, no nonsense. It handles quoted fields, auto-detects delimiters, parses numbers and booleans, and lets you download the result.

---

If this helped you, the JSON to CSV converter on the same site goes the other direction — useful when you need to export API data to a spreadsheet.