Converting CSV string to a 2D array of objects in ES6

Converting CSV string to a 2D array of objects in ES6

In this article I will explain how to convert a comma-separated values (CSV) string to a 2D array of object using Javascript.

Let’s say you have a CSV list of users ordered in three columns: id, name and email and you want to convert it to JSON to send it over an API for example.

First we’ll set up a function that takes in two parameters: a string and the delimiter by which we need to divide the rows by. Then we grab the title by slicing the first row and splitting it by our delimiter. If our delimiter is not set, we’ll set it to a comma by default.

	function convertCSVToJSON(str, delimiter = ',') {
	const title = str.slice(0, str.indexOf('\n')).split(delimiter);
	}
	let data;
	data = 'id, name, email\n0, Todd, [e-mail]\n1, Petra, [e-mail]';
	console.log(convertCSVToJSON(data, ','))

view raw app.js hosted with ❤ by GitHub

Now we have the titles in an array, let’s get the rows inside an array. We do this by mapping over our rows array and splitting each row by our delimiter.

	function convertCSVToJSON(str, delimiter = ',') {
	const titles = str.slice(0, str.indexOf('\n')).split(delimiter);
	const rows = str.slice(str.indexOf('\n') + 1).split('\n');
	return rows.map(row => {
	// Convert to 2D array
	const values = row.split(delimiter);
	});
	};
	let data;
	data = 'id, name, email\n0, Todd, [e-mail]\n1, Petra, [e-mail]';
	console.log(convertCSVToJSON(data, ','))

view raw app.js hosted with ❤ by GitHub

Now comes the exciting part. Inside our map loop we will convert the current row to an object by running the reduce() function on our titles array. This way we can set the correct value for each title. Then we’ll return our created object back and repeat the process for every row.

	function convertCSVToJSON(str, delimiter = ',') {
	const titles = str.slice(0, str.indexOf('\n')).split(delimiter);
	const rows = str.slice(str.indexOf('\n') + 1).split('\n');
	return rows.map(row => {
	// Convert to 2D array
	const values = row.split(delimiter);
	// Convert array to object
	return titles.reduce((object, curr, i) => {
	object[curr] = values[i];
	return object;
	}, {})
	});
	};
	let data;
	data = 'id, name, email\n0, Todd, [e-mail]\n1, Petra, [e-mail]';
	console.log(convertCSVToJSON(data, ','))

view raw app.js hosted with ❤ by GitHub

Great! Let’s refractor our code and make it shorter. Also we can test it with a different delimiter.

	function convertCSVToJSON(str, delimiter = ',') {
	const titles = str.slice(0, str.indexOf('\n')).split(delimiter);
	const rows = str.slice(str.indexOf('\n') + 1).split('\n');
	return rows.map(row => {
	const values = row.split(delimiter);
	return titles.reduce((object, curr, i) => (object[curr] = values[i], object), {})
	});
	};
	let data;
	data = 'id, name, email\n0, Todd, [e-mail]\n1, Petra, [e-mail]';
	console.log(convertCSVToJSON(data, ','))
	// Result:
	// 0: {id: "0", " name": " Todd", " email": " [e-mail]"}
	// 1: {id: "1", " name": " Petra", " email": " [e-mail]"}
	data = 'id; name; email\n0; Xander; [e-mail]\n1; Frank; [e-mail]';
	console.log(convertCSVToJSON(data, ';'))
	// Result:
	// 0: {id: "0", " name": " Xander", " email": " [e-mail]"}
	// 1: {id: "1", " name": " Frank", " email": " [e-mail]"}

view raw app.js hosted with ❤ by GitHub

That’s it! Hope you’ve learned something from this short article.