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:

Site,URL,Category
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:

<?php
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() {


    $.ajax({
    
       type: 'GET',
       url: 'get-csv.php',
       data: null,
       success: function(text) {
       
       
           var fields = text.split(/\n/);
           fields.pop(fields.length-1);
           
           
           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>';
           
           
           $(html).appendTo('body');
           
           
           
       
       
       
       }
    
    
    
    });



});

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.

Demo

Live demo