Processing CSV files with JavaScript and Papa Parse

If you want to extract the data from a CSV file and use it to populate your web app, this is the right article for you.

What is a CSV file?

A CSV file is a text file that contains data.
CSV stands for Comma Separated Values, so that means the values in the text file are, usually, all separated by commas.

The first line in a CSV file contains all the keys for the data.
Every line after that contains the values, in exactly the same order as the keys.
This can look like this:

first_name, last_name, email, age
Terry, Daniell, terry@email.com, 47
Shirley, Nielson, shirley@email.com, 28
Gabriella, Ridge, ridge@email.com, 82

This way data can efficiently be stored since the keys are not repeated.
CSV files contain data quite efficiently compared to something like JSON files where the keys are displayed for every key-value pair.

Use cases for CSV files include but are not limited to: Contact details, Shopify items, and general database content.

Using CSV files

There are some problems with using CSV files in your application.
For example, not all CSV files are actually separated by commas.
Sometimes they are separated by semicolons or other characters.

This means extracting the data is not as simple as just parsing the text from your file.
Luckily, people in the development community are awesome and someone made an npm package for this: Papa Parse.
Learn More:
Website
NPM-page
GitHub

Papa Parse is extremely helpful for a couple of reasons:

• It is extremely quick at parsing CSV files
• It automatically detects the “delimiter”, which is the character separating the values
• It allows you to easily parse strings, local files, and remote files

It has some more helpful features you can read about on their website.

In this article we will turn a CSV file into a set of cards:

CSV file turned into profile cards

Parse CSV files using Papa Parse

To get started, install Papa Parse by using npm:

npm install papaparse

Or import it using:

<script type="text/javascript" src="papaparse.min.js"></script>

Now you should be able to use it directly on your page.
If it is not working, take a look at the documentation to learn more.

Before showing you how to parse CSV files using Papa Parse, I will set some things up in this Codepen.
Like you can see in the Codepen, I added an option to input a string, upload a local CSV file, or to access a remote file by adding an URL

Of course, we will also need some data in CSV format.
I will use Mockaroo to generate random fake data.
You can easily create a schema that will allow you to choose the type of data in your CSV file.
My schema consists of:

• first_name
• last_name
• email
• age

But feel free to change these keys.

Mockaroo also allows you to get the data as a string, local file, or as an API, although you do need to create a (free) account for the API link.
I will show you how to work with each of those types.

Parsing a CSV string

To parse a CSV string with Papa Parse, this is how you go about it:

1. Create a variable containing the CSV string.
2. Parse with Papa Parse.
3. Do something with the result.

Or explained in code:

let string = "first_name,last_name,email,age      Niko,Radolf,nradolf0@sun.com,50 Rand,Feaster,rfeaster1@loc.gov,80 Sena,Earthfield,searthfield2@t.co,26 Sindee,Lowthorpe,slowthorpe3@issuu.com,35 Ursa,Oty,uoty4@goodreads.com,78"
let result = Papa.parse(string)
console.log(result)

If you display the result, you will see that the items are now sorted in arrays.
That means you can start populating your data.
For example, if you wish to have a list of fake profile cards, you can use a for-loop to create the cards with the data that you just retrieved from the CSV file.

Parsing a local file

You can see in the Codepen that we will use a file upload to upload our CSV file and then directly process it.

To process a local file with Papa Parse, you use the following code:

let file = document.getElementById("file-input").files[0]
Papa.parse(file, {
    complete: function(result) {
        console.log(result.data)
  }
})

The result also contains metadata, so if you just want the actual content of the CSV file, simply type:

result.data

Parsing a remote file

To parse a remote file, you first need to grab a link to a CSV file, which you can do on Mockaroo.
Then you can use the same method as for the local file, but add one configuration:

// Not a real link
let fileUrl = mycvsfile.com
Papa.parse(fileUrl, {
        download: true,
        complete: function(result) {
        console.log(result.data)
  }
})

What if I don’t want arrays but a JSON file?

If you want to have JSON files instead of arrays, and your CSV file contains a header row, you can add the header configuration.

Papa.parse(file, {
    header: true,
    complete: function(result) {
      console.log(result.data)
  }
})

This returns the data as an array of JSON objects.
You can then use the JSON object to populate your web app.

Using the parsed data of a CSV file

Like you can see in this Codepen, you can use the data to generate a list of cards (or other elements).
To do this, you can use the arrays that are the result of parsing the CSV file.
By then using some for-loops, you can easily generate HTML elements based on the data you parsed.

I will not explain how that works in this article, but all the code can be found in the Codepen.

And that’s it!
Hopefully, you now have a better sense of using CSV files for your own web app.
Thank you for reading!