Popolare una tabella con dati da Json e Javascript #pillole

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.