Блог

У меня есть этот скрипт, который получает csv-файл и разделяет его по столбцам. У меня возникли проблемы с отображением значений в таблице. Кажется, я не могу заставить каждый столбец создавать новую строку таблицы. Любая помощь будет оценена, поскольку я не очень хорошо разбираюсь в JS.

 <script>
      getData();

      async function getData() {
        const response = await fetch('data.csv')
        const data = await response.text();
        console.log(data);


        const table = data.split('n');
        table.forEach(row => {
          const columns = row.split(',')
          const date = columns[0]
          const temp = columns[1]

          console.log(date, temp);
        })

      }
    </script>
  

Data.csv выглядит примерно так:

 17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
  

Console.log(data, temp) возвращает без запятых. Моя единственная проблема заключается в попытке поместить их в таблицу с помощью Javascript.

 <table class="table text-left mt-2" id="data">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Date/Time</th>
              <th scope="col">Temperature</th>
            </tr>
          </thead>
          <tbody>
            <!-- Generate the csv table rows here -->
          </tbody>
</table>
  

 const tableBody = document.getElementById("table-body");



getData();

async function getData() {
      const response = await fetch('data.csv')
      const data = await response.text();
      console.log(data);


      const table = data.split('n');
      table.forEach((row,index) => {
      const columns = row.split(',')
      const date = columns[0]
      const temp = columns[1]
      console.log(date, temp);
      const tr = document.createElement("tr");
      tr.innerHTML = `
          <td>${index   1}</td>
          <td>${date}</td>
          <td>${temp}</td>
          `;
      // finally add the <tr> to the <tbody>
       tableBody.append(tr);
})
}  

 <table class="table text-left mt-2" id="data">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Date/Time</th>
              <th scope="col">Temperature</th>
            </tr>
          </thead>
          <tbody id='table-body'>
            <!-- Generate the csv table rows here -->
          </tbody>
</table>  

Попробуйте это и дайте мне знать, работает ли он или нет. Пожалуйста, обратите внимание, что я добавил идентификатор в тело таблицы и выбрал его через ID.