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

Parsing a CSV File With JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:
Final product imageFinal product imageFinal product image
What You'll Be Creating
The [CSV (Comma Separated Values)](https://en.wikipedia.org/wiki/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](https://www.mockaroo.com/), an online test data generator. Here's our file: ![Initial-CSV-File](https://cms-assets.tutsplus.com/uploads%2Fusers%2F780%2Fposts%2F25626%2Fimage-1455659926679.png) ## 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`](https://api.jquery.com/jquery.ajax/) function to retrieve the data from this file: Assuming the [AJAX](https://developer.mozilla.org/en-US/docs/AJAX) request is successful, the `successFunction` is executed. This function is responsible for parsing the returned data and transforming them into an HTML table: 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](https://cms-assets.tutsplus.com/uploads%2Fusers%2F780%2Fposts%2F25626%2Fimage-1455659681904.png) 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](https://en.wikipedia.org/wiki/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++](https://notepad-plus-plus.org/). In this editor, we can specify the desired format for a document by navigating to this path: ![Notepad++-EOL](https://cms-assets.tutsplus.com/uploads%2Fusers%2F780%2Fposts%2F25626%2Fimage-1455659654287.png) To illustrate it, consider our file. Depending on the format we choose, it would look like this: ![CSV-EOL](https://cms-assets.tutsplus.com/uploads%2Fusers%2F780%2Fposts%2F25626%2Fimage-1455659726404.png) ## 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](https://cms-assets.tutsplus.com/uploads%2Fusers%2F780%2Fposts%2F25626%2Fimage-1455659791140.png) ##How to Parse a CSV File With the Papa Parse Library In this section, we'll see how you can use the [Papa Parse library](https://www.papaparse.com/) to parse a CSV file in the blink of an eye! Papa Parse is a really powerful CSV parser which provides you with a lot of configuration options, and you could use it for really big CSV files as well. The Papa Parse library is available on npm, and if you don't want to use npm, you can [download the official Papa Parse npm package from unpkg](https://unpkg.com/papaparse@latest/papaparse.min.js) instead. ###How It Works The following example demonstrates how easy it is to parse a CSV string. The `results` variable holds the following contents. ![Papa Parse results](https://cms-assets.tutsplus.com/uploads/users/413/posts/36006/image/papaparse_parsed_csv_object.png) 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](https://developer.mozilla.org/en-US/docs/Web/API/File): And you can also pass in the URL to a remote CSV file: Apart from basic parsing, Papa Parse 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, but I think that it's always more challenging to achieve this by writing your own code.
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.