Advertisement
  1. Code
  2. JavaScript
Code

Parsing a CSV File With JavaScript

by
Difficulty:IntermediateLength:QuickLanguages:
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

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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.