Как я могу использовать данные в моем файле 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 в массив, похожий на массив, и затем с помощью значений A и B получить то, что там хранится.

Answer 1

вам нужно загрузить CSV-файл с XMLHttpRequest aka AJAX или как File Blob, а затем вам нужно проанализировать его перед выполнением любого вычисления. Это много работы.

Надеюсь, некоторые блестящие люди работали над решением, которое вы можете использовать повторно. 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
    }
  });
})

Answer 2

Самый простой способ - вставить csv в многострочную строку и обработать ее оттуда.

Не рекомендуется для больших 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;
}