Riempire una tabella con Javascript e JSON

In un app mobile, fatta con jQuery Mobile, mi è capitato di dover riempire una tabella con dati presi da un web service in formato JSON.

Ho quindi dovuto usare Javascript per leggere i dati e riempire la tabella.

Dato che ho visto che è una cosa non così inusuale, vediamo come fare in questo semplice articolo.

Partiamo da questo codice HTML:

<table id="my_table">
  <tbody>
  </tbody>
</table>

Una tabella vuota in pratica.

A questo punto vediamo la funzione da richiamare quando ci serve:

function getAllenamentiTable() {
    $.getJSON('get_value.php', function(data) {
        $.each(data, function(key, val) {
            var tdNome = '<td>' + val.a_nome + '</td>';
            var tdTempo = '<td>' + val.a_tempo + '</td>';
            var tdDistanza = '<td>' + val.a_distanza + '</td>';
            var tdMedia = '<td>' + val.a_media + '</td>';
            var tdVelocita = '<td>' + val.a_velocita + '</td>';
            var d = new Date("2013-10-27");
            var tdData = '<td>' + val.a_data + '</td>';
            $('#my_table').append('<tr>' + tdNome + tdTempo + tdDistanza + tdMedia + tdVelocita + tdData + '</tr>')
        });
    });
}

In pratica usiamo la funzione getJSON di jQuery per richiamare, tramite AJAX, un web service che ci restituisce i risultato in formato JSON.

Cicliamo sui risultati, aggiungendo di volta in volta una riga con le varie celle, attraverso il metodo append.

Ciao!!