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

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.