Tempo di lettura dell'articolo 2 minuti
Una semplice guida per andare a leggere i dati di un Json con javascript e popolare una tabella html.
Con Javascript possiamo fare molte cose, è un linguaggio molto potente. Possiamo andare a creare contenuti dinamici andando a leggere API e integrare i dati letti su pagine html. Oggi vi spiego come andare a caricare i dati di una tabella html con i contenuti di un json. Premesso i contenuti del JSon possono essere caricati anche tramite un API, ora per semplicità li leggiamo da una variabile.
Questa è la tabella di esempio, dove andremo a caricare i valori delle grammature standard delle macro categorie alimentari:
<table id="alimenti">
<thead>
<tr>
<th class="thtitle">Alimento</th>
<th class="thtitle">Porzione in grammi *</th>
</tr>
</thead>
<tbody id="alimenti-body">
</tbody>
</table>
Qui il JSon con i dati:
var alimenti = [
{
"Alimento": "Latte/yogurt",
"Porzione": "125"
},
{
"Alimento": "Formaggio fresco",
"Porzione": "100"
},
{
"Alimento": "Formaggio stagionato",
"Porzione": "50"
},
{
"Alimento": "Carne",
"Porzione": "100"
},
{
"Alimento": "Pesce",
"Porzione": "150"
},
{
"Alimento": "Uova",
"Porzione": "50 (1 uovo)"
},
{
"Alimento": "Legumi freschi",
"Porzione": "100 (a crudo)"
},
{
"Alimento": "Pane",
"Porzione": "50"
},
{
"Alimento": "Pasta/Riso",
"Porzione": "80 (a crudo)"
},
{
"Alimento": "Pasta fresca all'uovo",
"Porzione": "120 (a crudo)"
},
{
"Alimento": "Patate",
"Porzione": "200 (a crudo)"
},
{
"Alimento": "Insalata",
"Porzione": "50"
},
{
"Alimento": "Ortaggi",
"Porzione": "250 (a crudo)"
},
{
"Alimento": "Frutta",
"Porzione": "150"
}
];
A questo punto possiamo scrivere la nostra funzione che si occuperà di andare a leggere i dati e caricarli sulla tabella html:
var scriptAlimenti = document.createElement('script');
Creo l’elemento ScriptAlimenti.
scriptAlimenti.onload = function() {
var table = document.getElementById("alimenti");
var tbody = document.getElementById("alimenti-body"); // dichiaro dove andrò a caricare i dati
for (var i = 0; i < alimenti.length; i++) {
var row = document.createElement("tr");
row.insertAdjacentHTML('beforeend', `<td>${alimenti[i].Alimento}</td><td>${alimenti[i].Porzione}</td>`);
tbody.appendChild(row);
}
};
Creo la funzione scriptAlimenti che andrà a leggere la variabile alimenti popolando le righe con i danti dentro row.innerHTML.
A questo punto chiudo il mio script con l’elemento
document.head.appendChild(scriptAlimenti);
Ovvero andiamo a rendere visibile a a incorporare i valori di script alimenti dentro la tabella.