Mam ten skrypt, który otrzymuje plik CSV i oddziela go przez kolumnę. Mam problemy z wyświetlaniem wartości w tabeli. Nie mogę uzyskać każdej kolumny, aby utworzyć nowy wiersz tabeli. Każda pomoc zostanie doceniona, ponieważ nie jestem zbyt dobry w 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 wygląda w ten sposób:

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 (dane, temp) zwraca bez przecinków. Mój jedyny problem próbuje dostać je wewnątrz stołu za pomocą 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>
0
stronghold051 17 październik 2020, 15:45

1 odpowiedź

Najlepsza odpowiedź
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>

Spróbuj tego i daj mi znać, jeśli działa, czy nie. Uwaga: dodałem identyfikator do korpusu stołu i wybierając, że przez ID.

0
Dipankar Maikap 17 październik 2020, 13:00