我正在使用 Wordpress 开发网页。该网页需要有一个包含所有县的组合框。我有一个 csv 格式的数据集,其中包含所有这些县的大约 10k 行。 当用户在下拉列表中选择一个县时,我只想在网页中显示所选县的数据。这是我的要求。
在 wordpress 中,我的网页使用
添加 js 文件<script type="text/javascript" src="http://xxx/wp content/uploads/2014/05/countyList1.js"></script>
网页下拉的代码是
<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);
}
最佳答案
我强烈推荐研究这个插件:
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
}
});
然后所有内容都将存在于数组data 中,供您根据需要进行操作。如果您需要,我可以提供更多处理数组数据的示例。
插件页面上还有很多很棒的示例可以用来做各种事情。
关于Javascript将CSV文件加载到数组中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23762822/