ITIS G. RIVOIRA - IIS Denina Pellico Rivoira

Creazione di una tabella contenente dati di file JSON

Creare una tabella contenente diversi dati provenienti dal file JSON può essere utile per rappresentarli in modo chiaro all'utente

						
let div_header = document.createElement("div");
let div_misure = document.getElementById("misure");
div_misure.className = "col-sm-12";

//creazione header tabella
div_header.innerHTML = "<div class=\"row\">" + 
	"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">DEVICE</div>" +
	"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">TIMESTAMP</div>" +
	"<div class=\"col-sm-3 bg-secondary border d-flex justify-content-center\">TEMPERATURA<br />[°Cx10]</div>" +
	"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">UMIDITA'<br />[%RH]</div>" +
	"</div>";

//inserimento dell'header
div_misure.appendChild(div_header);

//ciclo for per l'inserimento dei dati in una riga della tabella
for (var misura of misure)  {
	let div_row = document.createElement("div");
	div_row.innerHTML = "<div class=\"row\">" + 
		"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">" + misura.lora_device_id + "</div>" +
		"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">" + cleanTimestamp(misura.measured_at) + "</div>" +
		"<div class=\"col-sm-3 bg-secondary border d-flex justify-content-center\">" + cleanTemperature(misura.data.sensor1.lowRes.temperature) + "</div>" +
		"<div class=\"col-sm-3 bg-info border d-flex justify-content-center\">" + misura.data.sensor1.lowRes.humidity + "</div>" +
		"</div>";
	
	//aggiungo la riga contenente i dati appena creata nella tabella
	div_misure.appendChild(div_row);
}
						
					

Dopo aver creato un header (intestazione) della tabella e dopo averlo inserito nella pagina web procedo a ciclare per il numero di misurazioni da caricare all'interno della tabella (creo dinamicamente una nuova riga per ogni misurazione)