jQuery: parsing di un file CSV

jQuery: parsing di un file CSV

Attualmente sto lavorando ad un progetto molto impegnativo che, tra le altre cose, richiede l'utilizzo di file CSV come formato di esportazione da un database MySQL. Eseguire il parsing di un file CSV con PHP è abbastanza semplice, così ho voluto provare ad eseguire tale parsing usando AJAX e jQuery. Il motivo è semplice: chi visualizza il report ha subito la tabella HTML nella pagina senza refresh. Ci sono due modi per farlo, che sono sostanzialmente equivalenti: parsing diretto del file CSV o parsing indiretto del file tramite proxy PHP. Vediamo i dettagli.

Il file CSV usato nell'esempio è il seguente:

Sito,URL,Categoria
Sitepoint,http://www.sitepoint.com/,Sviluppo web
Html.it,http://www.html.it/,Sviluppo web
Wamboo,http://www.wamboo.it/,Sviluppo web

Un file CSV può essere considerato come una tabella fatta di righe e colonne. Le righe sono delimitate da un ritono a capo (carattere \n), mentre le colonne sono separate da virgole. In tali file la prima riga è quella che ci fornirà le intestazioni per le colonne.

Il metodo diretto con jQuery è il seguente:


$(document).ready(function() {


    $.ajax({
    
       type: 'GET',
       url: 'csv-sample.csv',
       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');
           
           
           
       
       
       
       }
    
    
    
    });



});

Come si può notare, tutto il lavoro è svolto dal metodo JavaScript split(), il quale trasforma una stringa in un array di valori usando il delimitatore (anche un'espressione regolare) passato come argomento. In questo caso i delimitatori sono il ritono a capo (per ottenere le righe) e la virgola (per ottenere le colonne). Avolte può succedere che l'ultima riga del file sia vuota, quindi usiamo il metodo pop() per rimuovere tale riga.

PHP viene usato invece quando vogliamo essere sicuri al 100% che il tipo di dati restituito sia in formato text/plain:


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

È sufficiente modificare l'opzione url del metodo $.ajax() puntando al file PHP piuttosto che a quello CSV. Ovviamente nel file PHP possiamo inserire tutte le routine necessarie per generare il file CSV dal database.

Potete visionare l'esempio finale in questa pagina.

Torna su