javascript - 如何在我的网站上使用 CSV 文件中的数据？

Question

我正在尝试从 CSV 文件获取数据以将其显示到我的网站，方法是使用两个值作为 x 和 y 坐标(就像在图表上一样)，然后获取该位置的数据。

这是我的 HTML 代码

<form>
    Width <input type="text" id="W">
    Height <input type="text" id="H">
    Length <input type="text" id="L">
    <button type="button" onclick="f()">Calculate</button>
    <b id="result"></b>
</form>

这是我的 CSS 代码

function f()
{

    var L = parseInt(document.querySelector("#L").value);
    var W = parseInt(document.querySelector("#W").value);
    var H = parseInt(document.querySelector("#H").value);

    var A;
    var B;
    var calc;

    // These are the X and Y values that i want to use
    A = 2*(H+2)+W+5;
    B = 2*(H+2)+L+5;

    //calc = this the variable where I would like to store the data from the CSV file

    document.querySelector("#result").innerHTML = calc;
}

我拥有的数据示例如下

   0 1 2 3 4 5 6 7 8 
   | | | | | | | | |
0--1 2 3 4 5 6 7 8 9 
1--2 3 4 5 6 7 8 9 1
2--3 4 5 6 7 8 9 1 2
3--4 5 6 7 8 9 1 2 3
4--5 6 7 8 9 1 2 3 4
5--6 7 8 9 1 2 3 4 5
6--7 8 9 1 2 3 4 5 6
7--8 9 1 2 3 4 5 6 7
8--9 1 2 3 4 5 6 7 8

基本上，我想做的是将 CSV 数据加载到类似 2D 数组的数组中，然后使用 A 和 B 值获取存储在那里的任何内容。

Answer 1

您需要使用 XMLHttpRequest 又名 AJAX 或文件 Blob 加载 csv 文件，然后需要在进行任何计算之前对其进行解析。这是一项繁重的工作。

希望一些才华横溢的人致力于开发出您可以重用的解决方案。 https://www.papaparse.com 。在这里您可以找到如何安装此库:https://github.com/mholt/PapaParse#install

如果您不想将文件托管在某处并使用 AJAX 加载它，那么您可以添加文件输入并手动提交文件，PapaParse 可以使用 File Blob。

添加到您的 html 新输入:

<input type="file"
       id="csvFile"
       accept="text/csv">

然后添加到您的 Javascript:

const fileInput = document.querySelector('#csvFile')

fileInput.addEventListener('change', () => {
  Papa.parse(fileInput.files[0], {
    complete: function(results) {
      console.log(results);

      // Here you can go through results and do your calculation
    }
  });
})