Javascript将CSV文件加载到数组中
我正在使用Wordpress开发一个网页。 网页需要有一个与所有县组合的combobox。 我有一个csv格式的数据集，对于所有这些县都有大约10k行。 当用户在下拉列表中选择一个县时，我只想要在网页中显示所选择的县数据。 这是我的要求。
在wordpress，我的网页我正在使用添加js文件
并且网页下拉的代码是
在countyList1.js文件中，我有setCounties（）和getSelectedCountyData（）函数。
到目前为止，我可以看到与县列表的下拉列表。 我不知道如何阅读CSV文件并将选定的县filter应用于此列表。
我尝试了FileReader对象，我可以在网页上加载CSV内容，但我不希望用户选择CSV。 我已经有了数据集。
我正在尝试使用此SOpost中的这个jquery.csv-0.71库如何使用javascript从* .CSV文件读取数据？ 但我需要帮助。
这是在选择县时调用的代码
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); }
我强烈建议您查看此插件：
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 } });
然后，所有内容都将存在于数组数据中，供您根据需要进行操作。 如果需要，我可以提供更多处理数组数据的示例。
插件页面上有很多很好的例子可以用来做各种各样的事情。
如果您不过分担心文件的大小，那么您可能更容易将数据作为JS对象存储在另一个文件中并将其导入您的文件中。 使用语法同步或异步。 保存您需要导入文件并解析它。
但是，我可以看到为什么你不想重写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文件的位置。 第二个参数是一个可选的回调函数，它在文件完全加载时运行。
如果你的文件有非分离的commma，那么它就不会继续使用它，因为它只是通过切换返回和逗号来创建2d数组。 如果需要该function，您可能需要查看正则表达式。
//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方法; 他们通过’构造函数’函数创建一个具有自己的局部函数和变量的新对象（如数字，字符串，数组）。 在某些情况下非常方便。 此function可用于同时加载10个具有不同回调的不同文件（取决于您对csv的爱程度！）
您无法使用AJAX从用户计算机获取文件。 这绝对是错误的做法。
使用FileReader API：
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"""
这就是我以前将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插件。