Javascript将CSV文件加载到数组中
我正在使用Wordpress开发一个网页。网页需要有一个与所有县组合的组合框。我有一个csv格式的数据集,对于所有这些县都有大约10k行。
当用户在下拉列表中选择一个县时,我只想在网页中显示所选的县数据。这是我的要求。
I am developing a web page in Wordpress. The webpage needs to have a combobox with all counties. I have a dataset in csv format which has some 10k rows for all these counties. When the user selects a county in the dropdown, I want only the selected county data displayed in the web page. This is my requirement.
在wordpress中,我的网页我使用
In wordpress, my web page I am adding the js file using
<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()函数。
In countyList1.js file I have the setCounties() and getSelectedCountyData() functions.
到目前为止,我可以看到带有县列表的下拉列表。我不知道如何阅读CSV文件并将选定的县过滤器应用于此列表。
So far I can see the dropdown with counties list. I don't know how to read the CSV file and apply the selected county filter to this list.
我尝试了FileReader对象,我可以加载CSV内容网页,但我不希望用户选择CSV。我已经有了数据集。
I tried the FileReader object and I can load the CSV contents on the web page but I don't want the user to select the CSV. I have the dataset already.
我正在尝试使用此SO帖子中的这个jquery.csv-0.71库如何使用javascript从* .CSV文件读取数据?但我需要帮助。
I am trying to use this jquery.csv-0.71 library from this SO post How to read data From *.CSV file using javascript? but I need help.
以下是选择县时调用的代码
Here's the code which gets called when a county is selected
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);
}
我强烈建议调查此插件:
I highly recommend looking into this plugin:
http://github.com / evanplaice / jquery-csv /
我将它用于处理大型CSV文件的项目,并且它可以很好地将CSV解析为数组。您也可以使用它来调用您在代码中指定的本地文件,这样您就不依赖于文件上载。
I used this for a project handling large CSV files and it handles parsing a CSV into an array quite well. You can use this to call a local file that you specify in your code, also, so you are not dependent on a file upload.
上面包含插件后,您可以使用以下内容解析CSV:
Once you include the plugin above, you can essentially parse the CSV using the following:
$.ajax({
url: "pathto/filename.csv",
async: false,
success: function (csvd) {
data = $.csv.toArrays(csvd);
},
dataType: "text",
complete: function () {
// call a function on complete
}
});
所有内容都将存在于数据数组中,供您操作需要。如果需要,我可以提供更多处理数组数据的例子。
Everything will then live in the array data for you to manipulate as you need. I can provide further examples for handling the array data if you need.
插件页面上有许多很好的例子可以用来做各种各样的事情。
There are a lot of great examples available on the plugin page to do a variety of things, too.