Tuto : Fill an HTML table with a CSV file located by URL

[GDDTechmeta]

The Problem to solve

This TUTO explain how to fill autmoticaly an HTML table with the content of a CSV file located at an URL as asset for example.
The fileds in the CSV fil are separated with ';'
In this example the CSV contains
the metal symbol
the name of the metal
the λ Conductivité thermique (W/m.K)
the ρ densité (kg/m3)
the c capacité calorique massique (J/kg.K)

The table is automaticaly filled when the page is loaded
An html button can also fill the table

The HTML and JAVASCRIPT CODE

Here is the HTML code

<input type="button" id="btnsubmit" value="Read" onclick="readCSVFile();">
<br>
<table id="tblcsvdata" border="1" style="border-collapse: collapse;">
  <thead>
    <tr>
      <th>Symbole</th>
      <th>Metal</th>
      <th>λ Conductivité thermique (W/m.K)</th>
      <th>ρ densité (kg/m3)</th>
      <th>c capacité calorique massique (J/kg.K)</th>
   </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Here is the JAVASCRIPT code in section Page/SCRIPTS

<script>
window.addEventListener("load", function() {
    readCSVFile();
});

function readCSVFile(){
    fetch('http://localhost/datas.csv')
    .then(response => response.text())
    .then(csvText => {
      // Split the CSV data into rows
      const rowData = csvText.split('\n');
      
      // <table > <tbody>
      var tbodyEl = document.getElementById('tblcsvdata').getElementsByTagName('tbody')[0];
      tbodyEl.innerHTML = "";
      
      // Loop on the row Array (change row=0 if you also want to read 1st row)
      for (var row = 1; row < rowData.length; row++) {
        // Insert a row at the end of table
        var newRow = tbodyEl.insertRow();
        // Split by comma (;) to get column Array
        rowColData = rowData[row].split(';');
        // Loop on the row column Array
        for (var col = 0; col < rowColData.length; col++) {
          // Insert a cell at the end of the row
          var newCell = newRow.insertCell();
          newCell.innerHTML = rowColData[col];
        }
      }
    });
}
</script>

Explanation of the code

First the HTML put a button 'Read', when clicked it calls the javascript function readCSVFile()
after that the HTML make a table with only header line
The datas normaly described in the section are empty
The javascript function readCSVFile() will put the datas here

For the javascript, the first function window.addEventListener execute the javascript function readCSVFile()
when the page is loaded

The function uses the fetch() function to retrieve the CSV file from the server at the URL 'http://localhost/datas.csv'. The fetch() function returns a Promise object that resolves to a response object containing the contents of the file.

The response object is processed using the text() method, which returns a Promise object that resolves to the text content of the response.

When the Promise from the previous step is resolved, the function splits the text into an array of rows by using the split() method with the newline character ('\n') as the separator. Each row of the CSV file is a separate element in the rowData array.

The function then retrieves the element from the HTML table with the ID 'tblcsvdata' and sets its inner HTML to an empty string. This clears any existing data in the table.

The function then loops through each row of the rowData array using a for loop. The loop starts at the second row of the CSV file (i.e., index 1), since the first row usually contains headers.

For each row of the CSV file, the function creates a new HTML table row element () using the insertRow() method on the table body element.

The function then splits the row data into an array of columns using the split() method with the semicolon character (';') as the separator. Each column of the row is a separate element in the rowColData array.

The function then loops through each column of the row using another for loop. For each column, the function creates a new HTML table cell element () using the insertCell() method on the row element, and sets its inner HTML to the value of the column.

After all rows and columns have been processed, the function returns, and the HTML table should now contain the data from the CSV file.

That's All for now !!!