2

Olá! Eu gostaria de saber uma maneira de apresentar para o usuário em uma tabela HTML, de dados armazenados em um Banco de Dados MYSQL com conexão através de JSON Express.

const express = require('express');
const app = express();         
const bodyParser = require('body-parser');
const port = 3309;
const mysql = require('mysql');
var formidable = require("formidable");


var obj = {};
var path = require('path');


    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());

const router = express.Router();


app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});



    app.get('/lista', function(req, res) {

        execSQLQuery("SELECT Nome, modeloCarro, status FROM Clientes",res);
        });

    app.post('/dados', function(req, res) {
        execSQLQuery("INSERT INTO Clientes(Nome,CPF,dtNascimento,modeloCarro,status) VALUES ('"+req.body.nomeMotorista+"','"+req.body.CPF+"','"
        +req.body.dataNascimento+"','"+req.body.modeloCarro+"','"+req.body.Ativo+"')", res);
    });



    app.listen(port);
    console.log('API funcionando!');

/*****************************Codigo de Conexão*************************************/

function execSQLQuery(sqlQry, res){
    const connection = mysql.createConnection({
  host     : 'localhost',
  port     : 3308,
  user     : 'root',
  password : 'teste',
  database : 'mysql'
    });

 connection.query(sqlQry, function(error, results, fields){
      if(error) 
        res.json(error);
      else
        res.json(results);
      connection.end();
      console.log('executou!');
  });
}
1
  • Esta usando jade, ou ejs ou outro template engine? Commented 3/11/2017 às 8:36

1 Resposta 1

2

Você pode usar o engine ejs, usar um callpassar o array de objetos direto para a view e depois exibir cada um com o DataTables do jquery.

app.get('/lista', (req, resp) => {
execSQLQuery(sqlQry, (results) => {
    resp.render("Home", { lista: results });
   });
});

Na sua execSQLQuery adicione um parametro para a função de retorno, depois tem que criar uma variável que vai receber o seu result e logo após você faz passa ele como parâmetro para a função.

O exemplo abaixo é para um banco de dados SQL Server, mas a ideia é a mesma.

function request(Query, func_Retorno) {
var retorno = undefined;
//Executa a query e enche o objeto que será usado
var request = new sql.Request();
(request.query(Query).then((recordset) => {

    console.log("Carrega objeto");

    sql.close();
    //Preenche a variáveç retorno com um array de objetos
    retorno = recordset.recordset;
}).catch((error) => {
    console.error(error);
    sql.close();
})).then(() => {
    //Retorna o array de objetos para a função de callback
    if (func_Retorno != undefined)
        func_Retorno(retorno);
    console.log("Retorno do objeto concluido");
    });
}

Na sua view você cria uma tambela e na função jquery tem que usar a tag <%- %> para poder usar o que vem do seu backend.

<script>
    //Atribui a variável Lista o array de objetos que retorna do backend
    var Lista= <%- JSON.stringify(lista) %>;

    var TableDados = null;
    $(function () {

        TableDados = $('#tblDados').DataTable({
            "serverSide": false,
            "drawCallback": function (settings) {},
            "scrollX": true,
            "processing": true,
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "deferRender": true,
            "language":
            {
                "url": "/scripts/plugins/dataTables/languagePT-BR.json"
            },
            "columns": [
                { "data": "Nome" },
                { "data": "Sobrenome" },
                { "data": "Numero" },
                { "data": "Idade" },
            ],
            "order": [0, "asc"]
        });
        console.log(Lista);
        TableDados.rows.add(Lista)
        TableDados.draw();
    });
</script>

Para entender melhor como o DataTables funciona, da uma olhada nesse link

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .