如何使用网站上CSV文件中的数据?

我试图通过使用两个值作为x和y坐标(如在图形上),从CSV文件中获取数据以将其显示在我的网站上,并在该位置获取数据。

这是我的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值获取存储在此处的任何内容。

评论
  • 错过,遗憾
    错过,遗憾 回复

    您需要使用XMLHttpRequest aka AJAX或作为文件Blob加载csv文件,然后需要在执行任何计算之前对其进行解析。那是很多工作。

    Hopefully, some brilliant people worked on a solution you can reuse. https://www.papaparse.com . Here you can find how to install this library: 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
        }
      });
    })