javascript - CSV 数据和 JS/HTML

标签 javascript html csv

是否可以使用客户端 JS 打开位于 URL 的 CSV 文件并将数据提取(到数组中)?如果是这样,有人可以解释一下如何做到这一点,因为我正在努力弄清楚如何使用 JQuery,因为示例似乎从未打开 csv,他们只使用 csv 作为变量(这意味着我知道如何获取首先将其放入代码中 - 我没有)

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

我的 CSV 当前托管在此处:http://mrmoneymotivator.com/windspeed/windspeed.csv并且里面有一些虚拟数据。

我目前正在考虑获取仪表的第一行数据(将定期刷新)。一旦我完成了这项工作,我将使用数组数组在图表中显示历史数据。

非常感谢!

最佳答案

如果 CSV 和包含 JavaScript 的文档来自同一个,那么您当然可以执行此操作。 (更多:Same Origin Policy)

您可以使用 XMLHttpRequest object 检索数据,它将以文本形式返回给您。然后,根据 CSV 数据的复杂性,它可能就像使用 String#split ( specMDN )一样简单地获取行(行)数组,然后使用再次循环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/

相关文章:

javascript - 在 React 中使用 Hooks 获取 JSON 的正确方法是什么?

javascript - AngularJS:如何在 View 中显示html数据?

javascript - 如何改变jquery中的javascript上下文?

javascript - 页面与脚本重复

vb.net - 如何在 Vb.Net 中使用 streamwriter 从字符串变量创建 csv 文件?

python - CSV - 使用 Python 的 MYSQL

javascript - Angular2 firebase 检索并分配变量

javascript - 在移动 IE 上禁用标注(上下文菜单)

javascript - 使用 border-collapse 时,如何在 JavaScript 中计算 border-bottom-width?

javascript - 使用 Mongoose 架构导入 CSV