Buongiorno,
ho iniziato da poco a dedicarmi allo sviluppo con Javascript e uno dei primi problemi incontrati è stato relativo alla visualizzazione dei dati all'interno di una pagina HTML.
Non volendo appoggiarmi ad ulteriori librerie e nel tentativo di voler scrutare le tecniche adottate da professionisti del settore ho ricercato in rete fin quando ho trovato questo script.
Le funzioni proposte scansionano l'array e creano la tabella sfruttando le funzioni offerte da javascript puro: poco codice, elegante, nessuna dipendenza.
Per l'accesso ai dati mi appoggio ad un database MySQL:
var mysql = require('mysql');
var con = mysql.createConnection({
host: "localhost",
user: "my_Usr",
password: "my_Pwd",
});
con.connect(function(err) {
if (err) throw err;
con.query('use my_DB', function(err){
if (err) throw err;
});
con.query('select * from contacts limit 10', function(err, result){
if (err) throw err;
contacts = result;
});
});
Questo frammento di codice l'ho inserito all'inizio del file build-table.js con l'intento di farlo eseguire precedentemente alle chiamate così come proposte dall'autore dell'articolo.
Il codice finale del file build-table.js è il seguente:
var contacts;
var mysql = require('mysql');
var con = mysql.createConnection({
host: "localhost",
user: "my_Usr",
password: "my_Pwd",
});
con.connect(function(err) {
if (err) throw err;
con.query('use my_DB', function(err){
if (err) throw err;
// alert('database changed');
});
con.query('select * from contacts limit 10', function(err, result){
if (err) throw err;
contacts= result.toArray;
});
});
function generateTableHead(table, data) {
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of data) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(table, data) {
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}
}
let table = document.querySelector("table");
let data = Object.keys(contacts[0]);
generateTable(table, contacts); // generate the table first
generateTableHead(table, data); // then the head
E' chiaro che quache meccanismo ancora non mi è chiaro per cui vi chiedo la cortesia di aiutarmi.
Grazie