Javascript che carica il file CSV in un array

Question

Sto sviluppando una pagina Web in Wordpress. La pagina web deve avere una casella combinata con tutte le contee. Ho un set di dati in formato csv che ha alcune righe di 10k per tutte queste contee. Quando l'utente seleziona una contea nel menu a discesa, desidero solo i dati della contea selezionati visualizzati nella pagina Web. Questo è il mio requisito

in Wordpress, la mia pagina web sto aggiungendo il file js utilizzando

<script type="text/javascript" src="http://xxx/wp  content/uploads/2014/05/countyList1.js"></script> 

e il codice per pagina web discesa è

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select> 

In countyList1.js archiviare ho le setCounties() e Funzioni getSelectedCountyData().

Finora riesco a vedere il menu a discesa con l'elenco delle contee. Non so come leggere il file CSV e applicare il filtro di contea selezionato a questo elenco.

Ho provato l'oggetto FileReader e posso caricare il contenuto CSV sulla pagina Web ma non voglio che l'utente selezioni il CSV. Ho già il set di dati.

Sto cercando di utilizzare questa libreria jquery.csv-0.71 da questo post SO How to read data From *.CSV file using javascript? ma ho bisogno di aiuto.

Ecco il codice che viene chiamato quando viene selezionata una contea

function getSelectedCountyData() { 
     cntrySel = document.getElementById('county'); 
     //selCty = countyList[cntrySel.value]; 
     handleFiles(); 
} 

function handleFiles() { 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "D:\Docs\Desktop\csvfile.csv", 
      dataType: "csv", 
      success: function (data) { processData(data); } 
     }); 
    }); 
} 

function processData(allText) { 
    var allTextLines = allText.split(/\r\n|\n/); 
    var headers = allTextLines[0].split(','); 
    var lines = []; 

    for (var i = 1; i < allTextLines.length; i++) { 
     var data = allTextLines[i].split(','); 
     if (data.length == headers.length) { 

      var tarr = []; 
      for (var j = 0; j < headers.length; j++) { 
       tarr.push(headers[j] + ":" + data[j]); 
      } 
      lines.push(tarr); 
     } 
    } 
    console.log(lines); 
    drawOutput(lines); 
} 

function drawOutput(lines) { 
    //Clear previous data 
    document.getElementById("output").innerHTML = ""; 
    var table = document.createElement("table"); 
    for (var i = 0; i < lines.length; i++) { 
     var row = table.insertRow(-1); 
     for (var j = 0; j < lines[i].length; j++) { 
      var firstNameCell = row.insertCell(-1); 
      firstNameCell.appendChild(document.createTextNode(lines[i][j])); 
     } 
    } 
    document.getElementById("output").appendChild(table); 
} 

Answer 1

Non è possibile utilizzare AJAX per recuperare i file dal computer dell'utente. Questo è assolutamente il modo sbagliato per farlo.

Utilizza la FileReader API:

<input type="file" id="file input"> 

js:

console.log(document.getElementById("file input").files); // list of File objects 

var file = document.getElementById("file input").files[0]; 
var reader = new FileReader(); 
content = reader.readAsText(file); 
console.log(content); 

quindi analizzare content come CSV. Tenete a mente che il parser attualmente non tratta con i valori sfuggiti in formato CSV come: value1,value2,"value 3","value ""4"""

Answer 2

mi raccomando guardare in questo plugin:

http://github.com/evanplaice/jquery-csv/

Ho usato questo per un progetto di gestione di grandi file CSV e gestisce l'analisi di un CSV in un array abbastanza bene. Puoi usare questo per chiamare anche un file locale che hai specificato nel tuo codice, in modo da non dipendere da un caricamento di file.

Una volta che si include il plugin sopra, si può in sostanza analizzare il CSV utilizzando la seguente:

$.ajax({ 
    url: "pathto/filename.csv", 
    async: false, 
    success: function (csvd) { 
     data = $.csv.toArrays(csvd); 
    }, 
    dataType: "text", 
    complete: function() { 
     // call a function on complete 
    } 
}); 

Tutto sarà poi vivere nella matrice dati per di manipolare come avete bisogno. Posso fornire ulteriori esempi per la gestione dei dati dell'array se necessario.

Ci sono molti ottimi esempi disponibili nella pagina del plugin per fare anche una varietà di cose.

Answer 3

Se la tua dimensione non è eccessivamente preoccupante, potrebbe essere più semplice memorizzare i dati come oggetto JS in un altro file e importarli nel tuo. O sincrono o asincrono usando la sintassi <script src="countries.js" async></script>. Salva su di te la necessità di importare il file e analizzarlo.

Tuttavia, posso capire perché non si desidera riscrivere 10000 voci, quindi ecco un parser di csv di base orientato agli oggetti che ho scritto.

function requestCSV(f,c){return new CSVAJAX(f,c);}; 
function CSVAJAX(filepath,callback) 
{ 
    this.request = new XMLHttpRequest(); 
    this.request.timeout = 10000; 
    this.request.open("GET", filepath, true); 
    this.request.parent = this; 
    this.callback = callback; 
    this.request.onload = function() 
    { 
     var d = this.response.split('\n'); /*1st separator*/ 
     var i = d.length; 
     while(i--) 
     { 
      if(d[i] !== "") 
       d[i] = d[i].split(','); /*2nd separator*/ 
      else 
       d.splice(i,1); 
     } 
     this.parent.response = d; 
     if(typeof this.parent.callback !== "undefined") 
      this.parent.callback(d); 
    }; 
    this.request.send(); 
}; 

Quale può essere utilizzato in questo modo;

var foo = requestCSV("csvfile.csv",drawlines(lines)); 

Il primo parametro è il file, relativo alla posizione del file html in questo caso. Il secondo parametro è una funzione di callback opzionale che viene eseguita quando il file è stato completamente caricato.

Se il tuo file ha un comando non separatore, non lo farà, poiché crea solo array 2d tagliando ritorni e virgole. Potresti voler controllare le espressioni regolari se hai bisogno di quella funzionalità.

//THIS works 

"1234","ABCD" \n 
"!@£$" \n 

//Gives you 
[ 
[ 
    1234, 
    'ABCD' 
], 
[ 
    '!@£$' 
] 
] 

//This DOESN'T! 

"12,34","AB,CD" \n 
"!@,£$" \n 

//Gives you 

[ 
[ 
    '"12', 
    '34"', 
    '"AB', 
    'CD' 
] 
[ 
    '"!@', 
    '£$' 
] 
] 

Se non sei abituato ai metodi OO; creano un nuovo oggetto (come un numero, una stringa, una matrice) con le proprie funzioni e variabili locali tramite una funzione di 'costruzione'. Molto utile in determinate situazioni. Questa funzione può essere utilizzata per caricare 10 file diversi con diversi callback contemporaneamente (a seconda del tuo livello di csv love!)

Answer 4

Questo è quello che usavo per usare un file csv in un array. Non è possibile ottenere le risposte di cui sopra per funzionare, ma questo ha funzionato per me.

$(document).ready(function() { 
    "use strict"; 
    $.ajax({ 
     type: "GET", 
     url: "../files/icd10List.csv", 
     dataType: "text", 
     success: function(data) {processData(data);} 
    }); 
}); 

function processData(icd10Codes) { 
    "use strict"; 
    var input = $.csv.toArrays(icd10Codes); 
    $("#test").append(input); 
} 

Utilizzato il plug-in jQuery-CSV collegato in alto.