[Javascript - Node js] - Inserire i dati all'interno di una tabella HTML.

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

Originariamente inviato da Dev-01

E' chiaro che quache meccanismo ancora non mi è chiaro per cui vi chiedo la cortesia di aiutarmi.

Ma il problema qual è?

Scusami hai ragione.
Non riesco a mostrare i dati provenienti da MySql nella pagina html.
Lo script trovato in rete funziona correttamente e dalla console di Node js riesco ad ottenere il risultato della query ma non riesco a passare il result come parametro alla funzione che crea la tabella.

Originariamente inviato da Dev-01

Non riesco a mostrare i dati provenienti da MySql nella pagina html.
Lo script trovato in rete funziona correttamente e dalla console di Node js riesco ad ottenere il risultato della query ma non riesco a passare il result come parametro alla funzione che crea la tabella.

Ma ti viene restituito un errore?
Se sì, qual è?

No, nessun errore. La mia sensazione è che o la parte che legge i dati in MySQL non viene eseguita oppure sbaglio a passare il parametro.

con.query('selectrom contacts limit 10', function(err, result)

Magari è un errore di copia/incolla ma credo che non sia proprio corretto ...

Direi che dovrebbe essere qualcosa di simile :

con.query('select  *  from contacts limit 10', function(err, result)

EDIT : è un errore di formattazione del forum ... dimentica la mia risposta.

Originariamente inviato da Dev-01

La mia sensazione è che o la parte che legge i dati in MySQL non viene eseguita oppure sbaglio a passare il parametro.

Più che andare a sensazione, prova a fare un debugging, eseguendo magari il programma passo per passo, oppure facendo dei log sulla console per verificare qual è l'esito di ogni operazione e il valore che subiscono le variabili man mano che le istruzioni vengono eseguite, in modo da accertarti che il comportamento del programma - fase per fase - sia quello atteso.

Ciao!