2

是否可以使用客户端 JS 从位于 URL 的 CSV 文件中打开和提取（到数组中）数据？如果是这样，有人可以解释如何做到这一点，因为我正在努力研究如何使用 JQuery，因为示例似乎从未打开 csv，它们只使用 csv 作为变量（暗示我知道如何获得首先将其放入代码中-我没有）

我需要将一些天气数据放入浏览器中的 JS 数组中，从中我将生成一些仪表来显示风速和风向。

我的 CSV 目前托管在此处：http ://mrmoneymotivator.com/windspeed/windspeed.csv ，其中包含一些虚拟数据。

我目前只是在查看获取仪表的第一行数据（将定期刷新）。一旦我完成了这项工作，我将使用数组数组在图表中显示历史数据。

提前谢谢了！

4

2 回答 2

4

如果 CSV 和包含 JavaScript 的文档是从同一来源提供的，您当然可以这样做。（更多：同源政策）

您将使用XMLHttpRequestobject检索数据，这会将其作为文本返回给您。然后，根据 CSV 数据的复杂性，它可以像使用String#split( spec , MDN ) 获取行（行）数组一样简单，然后String#split在循环中再次使用以获取每行的值数组. 我说“取决于复杂性”，因为 CSV 是一种比人们有时怀疑的更复杂的格式，涉及可以包含换行符和逗号的引用单元格。但是，如果您的数据不使用这些功能，只需几次split调用就可以解决问题。如果您的数据确实使用了更多功能，您可能需要找到一个库来处理对完整 RFC的解析。

这是一个完整的示例：Live Copy | 直播源

<!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>
于 2013-07-08T14:39:37.123 回答
1
  1. Ajax CSV 文件

要么使用库（我相信你能够单独搜索 JS CSV :)）

或者

按 '\n' 分割以获得 Rows 并再次按 ',' 分割以获得值...
注意：有时 CSV 将值放在 " 标记中，因此请做好准备。

我使用的库位于：https ://code.google.com/p/jquery-csv/

<script type="text/javascript" src="jquery-csv.js"></script> 
<script type="text/javascript">
$.ajax({
   url: "http://www.example.com/report.csv",
   cache: false
}).done(function( csvData ) {
     var arr2D = $.csv.toArrays(input);
});
</script>

注意：未经测试！

于 2013-07-08T14:42:52.410 回答