Web 3 HTML Client - Frontend

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>STUDENTI FRONT END</h2>
   <p>BlockChain Front End for Studenti Contract</p><br>

   <h3> Resulting Table: </h3>
   <div id="container"></div>
   <script>

function httpGet(theUrl, callbackThen)
{
    const fetchPromise = fetch(
  theUrl
);

fetchPromise.then((response) => {
  const jsonPromise = response.json();
  jsonPromise.then((data) => {
    console.log(data);
    convert(data);
  });
});
}


      // Function to convert JSON data to HTML table
      function convert(jsonData1) {


         // Sample JSON data
         let jsonData = jsonData1;

         // Get the container element where the table will be inserted
         let container = document.getElementById("container");
         container.replaceChildren();
         // Create the table element
         let table = document.createElement("table");

         // Get the keys (column names) of the first object in the JSON data
         let cols = Object.keys(jsonData[0]);

         // Create the header element
         let thead = document.createElement("thead");
         let tr = document.createElement("tr");

         // Loop through the column names and create header cells
         cols.forEach((item) => {
            let th = document.createElement("th");
            th.innerText = item; // Set the column name as the text of the header cell
            tr.appendChild(th); // Append the header cell to the header row
         });
         thead.appendChild(tr); // Append the header row to the header
         table.append(tr) // Append the header to the table

         // Loop through the JSON data and create table rows
         jsonData.forEach((item) => {
            let tr = document.createElement("tr");

            // Get the values of the current object in the JSON data
            let vals = Object.values(item);

            // Loop through the values and create table cells
            vals.forEach((elem) => {
               let td = document.createElement("td");
               td.innerText = elem; // Set the value as the text of the table cell
               tr.appendChild(td); // Append the table cell to the table row
            });
            table.appendChild(tr); // Append the table row to the table
         });
         container.appendChild(table) // Append the table to the container element
      }

      httpGet('http://127.0.0.1:5000/api/students', function(data){convert(data)});


   </script>
</body>
</html>