Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Parsing a CSV File With JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:
Final product image
What You'll Be Creating

The CSV (Comma Separated Values) file format is a popular way of exchanging data between applications.

In this quick tip, we’ll learn how JavaScript can help us visualize the data of a CSV file.

Creating a CSV File

To begin with, let’s create a simple CSV file. To do this, we’ll take advantage of Mockaroo, an online test data generator. Here’s our file:

Initial-CSV-File

Converting a CSV File Into an HTML Table

Now that we’ve generated the file, we’re ready to parse it and build an associated HTML table.

As a first step, we’ll use jQuery’s ajax function to retrieve the data from this file:

Assuming the AJAX request is successful, the successFunction is executed. This function is responsible for parsing the returned data and transforming them into an HTML table:

So, the idea is to convert each of the CSV rows into a table row. With that in mind, let’s briefly explain how the code above works:

  • First, we use a regex to split the AJAX response, and thus separate the CSV rows.
  • Then, we iterate through the CSV rows and split their data fields.
  • Finally, we loop through the data fields and create the corresponding table cells.

Furthermore, to get a better understanding of this code, consider the following visualization:

CSV-Representation

At this point, it’s important to clarify why we used the /\r?\n|\r/ regex to split the CSV rows.

As you probably already know, there are different representations of a newline across operating systems. For example, on Windows platforms the characters representing a newline are \r\n. That said, by using the regex above, we’re able to match all those possible representations.

In addition, most text editors allow us to choose the format for a newline. Take, for instance, Notepad++. In this editor, we can specify the desired format for a document by navigating to this path:

Notepad++-EOL

To illustrate it, consider our file. Depending on the format we choose, it would look like this:

CSV-EOL

Adding Styles to the HTML Table

Before we look at the resulting table, let’s add a few basic styles to it:

Here’s the generated table:

Generated-Table

How to Parse a CSV File With the PapaParse Library

In this section, we’ll see how you can use the PapaParse library to parse a CSV file in the blink of eye! PapaParse is a really powerful CSV parser which provides you a lot of configuration options and you could use it for really big CSV files as well.

The PapaParse library is available on npm, and if you don’t want to use npm, you can download the official PapaParse nmp package from unpkg instead.

How it Works

The following example demonstrates how easy it is to parse a CSV string.

The results variable holds the following contents.

PapaParse results

As you can see, Results.data holds an array of all the rows. If there are any errors during parsing, they will be in Results.errors. Finally, you can use Results.meta to access meta information about the CSV string.

On the other hand, if you want to directly parse a local CSV file you can pass a JavaScript File object:

And you can also pass in the URL to a remote CSV file:

Apart from basic parsing, PapaParse provides a lot of other features like:

  • streaming large files (so you can process them line-by-line)
  • reverse parsing (to emit CSV from a JavaScript object)
  • jQuery integration
  • and more

I encourage you to explore this library since it’s really powerful and easy-to-use!

Conclusion

In this short article, we went through the process of converting a CSV file into an HTML table. Of course, we could have used a web-based tool for this conversion, yet I think that it’s always more challenging to achieve this by writing your own code.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.