Creare una tabella HTML con dati JSON utilizzando jQuery
Se sei alla ricerca di un modo semplice per creare una tabella HTML utilizzando dati JSON, allora sei nel posto giusto! In questo articolo ti mostreremo come creare una tabella HTML in pochi passi utilizzando i dati JSON ricevuti da jQuery. Non preoccuparti se sei un principiante, non serve alcuna conoscenza avanzata di HTML o di programmazione.
Per cominciare, dovrai includere jQuery nel tuo progetto HTML. Puoi farlo semplicemente copiando e incollando il seguente codice all’interno del tag <head> del tuo documento HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>Una volta che hai incluso jQuery, puoi utilizzare il metodo $.getJSON() per recuperare i dati JSON dal server. Ad esempio, se hai un file “dati.json” sul tuo server, puoi recuperare i dati con il seguente codice:
$.getJSON("dati.json", function(data) {...});Una volta che hai i dati JSON, puoi utilizzare il metodo $.each() di jQuery per iterare su ogni oggetto nel JSON e costruire la tabella HTML. Ecco un esempio di come costruire una tabella HTML utilizzando i dati JSON:
var table = "<table><tr><th>Nome</th><th>Cognome</th><th>Età</th></tr>";
$.each(data, function(index, value) {
table += "<tr><td>" + value.nome + "</td><td>" + value.cognome + "</td><td>" + value.eta + "</td></tr>";
});
table += "</table>";
$("#tabella").html(table);In questo esempio, creiamo una variabile table che contiene il codice HTML per la tabella. Successivamente, utilizziamo il metodo $.each() per iterare su ogni oggetto nel JSON e aggiungere una riga alla tabella per ogni oggetto. Infine, aggiungiamo il codice HTML della tabella al documento HTML utilizzando il metodo .html() di jQuery.
Il codice completo è il seguente:
<!DOCTYPE html>
<html>
<head>
<title>Tabella con dati JSON</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON("dati.json", function(data) {
var table = "<table><tr><th>Nome</th><th>Cognome</th><th>Età</th></tr>";
$.each(data, function(index, value) {
table += "<tr><td>" + value.nome + "</td><td>" + value.cognome + "</td><td>" + value.eta + "</td></tr>";
});
table += "</table>";
$("#tabella").html(table);
});
});
</script>
</head>
<body>
<div id="tabella"></div>
</body>
</html>
