Parsing a CSV File With JavaScript

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:

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:

  $.ajax({
        url: 'csv_data.csv',
        dataType: 'text',
      }).done(successFunction);

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:

  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(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:

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:

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

Adding Styles to the HTML Table

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

  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }     
      

Here’s the 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.

var results = Papa.parse(data); // data is a CSV string

The results variable holds the following contents.

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:

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

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

Papa.parse(url, {
    download: true,
    complete: function(results) {
        console.log(results);
    }
});

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.