是否可以使用客户端 JS 打开位于 URL 的 CSV 文件并将数据提取(到数组中)?如果是这样,有人可以解释一下如何做到这一点,因为我正在努力弄清楚如何使用 JQuery,因为示例似乎从未打开 csv,他们只使用 csv 作为变量(这意味着我知道如何获取首先将其放入代码中 - 我没有)
我需要将一些天气数据放入浏览器中的 JS 数组中,从中生成一些仪表来显示风速和风向。
我的 CSV 当前托管在此处:http://mrmoneymotivator.com/windspeed/windspeed.csv并且里面有一些虚拟数据。
我目前正在考虑获取仪表的第一行数据(将定期刷新)。一旦我完成了这项工作,我将使用数组数组在图表中显示历史数据。
非常感谢!
最佳答案
如果 CSV 和包含 JavaScript 的文档来自同一个源,那么您当然可以执行此操作。 (更多:Same Origin Policy)
您可以使用 XMLHttpRequest
object 检索数据,它将以文本形式返回给您。然后,根据 CSV 数据的复杂性,它可能就像使用 String#split
( spec 、 MDN )一样简单地获取行(行)数组,然后使用再次循环String#split
以获取每行的值的数组。我说“取决于复杂性”,因为 CSV 是一种比人们有时怀疑的更复杂的格式,涉及可能包含换行符和逗号的引用单元格。但如果您的数据不使用这些功能,只需几次 split
调用即可解决问题。如果您的数据确实使用更多功能,您可能需要找到一个根据 full RFC 处理解析的库.
这是一个完整的示例:Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load CSV</title>
</head>
<body>
<script>
(function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("GET", "http://jsbin.com/ocuqog/1");
xhr.send();
display("Request sent");
function handleStateChange() {
if (xhr.readyState == 4 &&
xhr.status >= 200 &&
xhr.status < 300) {
display("Got response");
showData(xhr.responseText);
}
}
function showData(data) {
var rows = data.split(/\s+/);
var rowNum;
var cells;
var cellNum;
for (rowNum = 0; rowNum < rows.length; ++rowNum) {
cells = rows[rowNum].split(",");
display("row " + rowNum +
" has " + cells.length + " values(s)");
display("row " + rowNum + "'s first value is " +
cells[0]);
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
</script>
</body>
</html>
关于javascript - CSV 数据和 JS/HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17529347/