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.