refactor data display to use table rows for sensor data

src/Python/flask/web/static/script.js

@@ -37,16 +37,19 @@ document.addEventListener("DOMContentLoaded", function () {
   // Parse the data and show it on the website
   async function parseData() {
     const data = await fetchData();
-    const sensorDataContainer = document.getElementById("sensor-data");
+    const sensorDataContainer = document.getElementById("sensor-data").querySelector("tbody");
     sensorDataContainer.innerHTML = ""; // Clear previous data
-    // For each object in JSON array, create a new paragraph element and append it to the sensorDataContainer
+    // For each object in JSON array, create a new row and append it to the sensorDataContainer
-    for (const [key, value] of Object.entries(data)) {
+    data.forEach(sensor => {
-      const dataElement = document.createElement("p");
+      const row = document.createElement("tr");
-      dataElement.textContent = `${key}: ${value}`;
+      Object.entries(sensor).forEach(([key, value]) => {
-      sensorDataContainer.appendChild(dataElement);
+        const cell = document.createElement("td");
+        cell.textContent = `${key}: ${value}`;
+        row.appendChild(cell);
+      });
+      sensorDataContainer.appendChild(row);
+    });
   }
-  }
-
   // Update the image
   function updateImage() {
     var img = document.getElementById("robot-image");