javascript

How to parse CSV data in JavaScript

Feb 17, 2020

A common requirement that comes up is reading the data from CSV (Comma Separated Values) files with JavaScript. In this post, I will detail on how I did it in the browser with a JavaScript library Papa Parse

A common requirement that comes up is reading the data from CSV (Comma Separated Values) files with JavaScript. You can do this through the browser or backend with Node JS.

In this post, I will detail on how I did it in the browser with a JavaScript library Papa Parse

Background on parsing CSV

Comma-Separated Values (CSV) files are a common way to exchange data.

At first glance, I thought this could be straight forward since its you would just need to split on commas right? However there could be many edge cases you have to consider:

  • files using different delimiters instead of commas

  • escape characters - eg what if the column data contains commas

  • what about security? What if the file contains malicious binary data may be included in order to exploit potential buffer overruns in the program processing CSV data

Their format is documented in rfc4180

So now you can see why we need an external library to do this instead of rolling our own implementation. I have used Papa Parse for this.

Getting started with Papa Parse

Theres 2 ways to install Papa Parse

(1) Through NPM

npm install papaparse

(2) Using CDN for quick prototyping

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"
 integrity="sha256-Fh801SO9gqegfUdkDxyzXzIUPWzO/Vatqj8uN+5xcL4=" 
 crossorigin="anonymous">
 </script>

How do I parse a CSV string?

var csvString = "gary,20,male\nbob,30,male\njane,22,female";
var results = Papa.parse(csvString);

console.log(results);

/*

    data: Array(2)
    0: (3) ["gary", "20", "male"]
    1: (3) ["bob", "30", "male"]
    length: 2
    __proto__: Array(0)
    errors: []
    meta: {delimiter: ",", linebreak: "↵", aborted: false, truncated: false, cursor: 24}

*/

Notice the above result. Papa Parse gives us a errors array with all the parsing errors.

Also it gives us a meta object that we can inspect to get data such as the delimiters, line breaks, etc

How do I parse a file?

Papa.parse(fileInput.files[0], {
	complete: function(results) {
		console.log(results);
	}
});

How do I parse a CSV file with header?

If you notice with the above two examples, the result that Papa Parse gives us is a 2-dimensional array. Eg.

    [
        ["gary", "20", "male"],
        ["bob", "30", "male"]
    ]

Now, if you have a CSV that contains headers, you can tell Papa Parse to automatically map those headers/data to a object.

var csvString = "Name,Age,Gender\ngary,20,male\nbob,30,male\njane,22,female";
var results = Papa.parse(csvString, {
	header: true
});

console.log(results);

/*

    data: Array(3)
    0: {Name: "gary", Age: "20", Gender: "male"}
    1: {Name: "bob", Age: "30", Gender: "male"}
    2: {Name: "jane", Age: "22", Gender: "female"}
    length: 3
    __proto__: Array(0)
    errors: []
    meta: {delimiter: ",", linebreak: "↵", aborted: false, truncated: false, cursor: 55, …}
*/

Conclusion

Parsing CSV files can be more involved than just String.split(','). Luckily theres external CSV parsing libraries to help us. Papa Parse is a mature library that can help us parse CSV with common use cases like - parsing CSV strings, files and files with headers.

See Also

Chrome DevTools tip - disabling the cache

Read more

Different methods to filter a JavaScript array of objects

Read more