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

Question

I'm trying to get data from a CSV file to display it to my website, by using two values as x and y coordinates, like on a graph, and getting the data in that location.

This is my HTML code

<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>

This is my CSS code

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;
}

an example to the data that i have is like this

   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

Basically what I'm trying to do is load the CSV data into an array-like a 2D array and then using the A and B values get whatever is stored there.

Answer 1

you need to load csv file with XMLHttpRequest aka AJAX or as File Blob and then you need to parse it before doing any calculation. That is a lot work.

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

If you don't want to host the file somewhere and load it with AJAX then you can add file input and manually submit file and PapaParse can work with File Blob.

Add to your html new input:

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

And then add to your 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
    }
  });
})

Answer 2

Simplest way would be to paste csv into a multiline string and work it out from there.

Not recommended for large csv.

function getByXY(x, y) {
//paste your csv in backticks not quotes 
    var data = `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`;

//Split by new line to get row
    let rows = a.split("\n");
// check your delimiter can value  can be separated by comma or space  
    let cols = rows[x].split(",");
  // take it out  
   let value = cols[y];
  // throw it back to caller
  return value;
}