Javascript將CSV文件加載到數組中

Question

我正在開發Wordpress中的網頁。該網頁需要與所有縣的組合框。我有一個csv格式的數據集，所有這些縣都有10k行。 當用戶在下拉列表中選擇一個縣時，我只想要顯示在網頁中的所選縣數據。這是我的要求。

在WordPress，我的網頁，我將使用

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

和網頁下拉代碼的js文件是

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

在countyList1.js文件我有setCounties（）和getSelectedCountyData（）函數。

到目前爲止，我可以看到與縣列表的下拉列表。我不知道如何讀取CSV文件並將選定的縣過濾器應用到此列表。

我試過FileReader對象，我可以在網頁上加載CSV內容，但我不希望用戶選擇CSV。我已經有了這個數據集。

我想從這個SO後How to read data From *.CSV file using javascript?這個jquery.csv-0.71庫，但我需要幫助。

這裏是當一個縣被選定

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

不能使用AJAX來從用戶機器取文件，這被調用的代碼。這絕對是錯誤的做法。

使用的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); 

然後解析content爲CSV。請記住，你的解析器目前不逃值CSV處理，如：value1,value2,"value 3","value ""4"""

Answer 2

我強烈建議考慮這個插件：

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

我用這一個項目處理大型CSV文件和它可以很好地處理將CSV解析爲數組。您可以使用它來調用您在代碼中指定的本地文件，因此您不依賴文件上載。

一旦你有上面的插件，你基本上可以使用下面的解析CSV：然後

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

一切都將住在數組中數據爲您操作，因爲你需要。如果需要，我可以提供處理陣列數據的更多示例。

插件頁面上有很多很棒的例子可以用來做各種事情。

Answer 3

如果您不太擔心文件的大小，那麼您可能更容易將數據作爲JS對象存儲在另一個文件中，並將其導入到您的文件中。可以同步或異步使用語法<script src="countries.js" async></script>。節省您需要導入文件並解析它。

但是，我可以看到爲什麼你不想重寫10000個條目，所以這裏是我寫的一個基本的面向對象的csv解析器。

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(); 
}; 

可以這樣使用;

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

第一個參數是文件，相對於你的html文件在這種情況下的位置。 第二個參數是一個可選的回調函數，當文件被完全加載時運行。

如果你的文件有不分離的恩典，那麼它不會繼續這個，因爲它只是通過在返回和逗號處切分來創建2d數組。如果您需要該功能，則可能需要查看regexp。

//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' 
] 
[ 
    '"!@', 
    '£$' 
] 
] 

如果你不習慣OO方法;他們通過「構造函數」函數創建一個新的對象（如數字，字符串，數組）。在某些情況下非常方便。這個功能可以用來同時加載10個不同回調的文件（取決於你的csv愛情程度！）

Answer 4

這就是我曾經使用csv文件進入數組。無法獲得上述答案，但這對我有效。

$(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); 
} 

使用上面鏈接的jQuery-CSV插件。