jQuery: parsing a CSV file

In this post I'm going to show you how to parse a CSV file with jQuery. To accomplish this task, we first need to know that jQuery cannot handle a CSV file directly, that is, when served with its default content type. For that reason, we'll use a PHP script that fetches the file and returns it as plain text. First of all, here's how our CSV file will look like:

Sitepoint,http://www.sitepoint.com/,Web development
Html.it,http://www.html.it/,Web development
Wamboo,http://www.wamboo.it/,Web development

That's a really simple CSV file. Now we've to set up our PHP script:

header('Content-Type: text/plain');
$csv = file_get_contents('csv-sample.csv');
echo $csv;

As you can see, we've set the HTTP header to text/plain so that jQuery can handle it. Now jQuery:

$(document).ready(function() {

       type: 'GET',
       url: 'get-csv.php',
       data: null,
       success: function(text) {
           var fields = text.split(/\n/);
           var headers = fields[0].split(','), html = '<table>';
           html += '<tr>';
           for(var i = 0; i < headers.length; i += 1) {
              html += '<th scope="col">' + headers[i] + '</th>';
           html += '</tr>';
           var data = fields.slice(1, fields.length);
           for(var j = 0; j < data.length; j += 1) {
              var dataFields = data[j].split(',');
              html += '<tr>';
              html += '<td>' + dataFields[0] + '</td>';
              html += '<td><a href="' + dataFields[1] + '">' + dataFields[1] + '</a></td>';
              html += '<td>' + dataFields[2] + '</td>';
              html += '</tr>';
           html += '</table>';


We've turned the returned text into an array of lines using the split() function with a regular expression. Since the last line is empty, we remove it from the array. Then we select the first line, which contains the CSV headers, we split it again into single values and parse it. Since we've already used the first line, we select the rest of the array using the slice() function. We loop through this new array, we split each line into values again and parse them. You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “jQuery: parsing a CSV file”

  1. I was wondering with some tweaks, is it possible to have jquery append a header to a dropdown list instead of a table? I have a project where a user will be uploading a csv file and it needs to update drop down lists. So far I cant seem to find much info on it.

Leave a Reply

Note: Only a member of this blog may post a comment.