How to render data through DOM instead of through table
I have a question about an application I'm creating, I'm using an Oracle database, and I'm getting information from the database and presenting it on the screen via a table, but I want to try processing the data individually, like creating a paragraph and display a value.
I can only present data through tables, are there any other ways? If anyone can help me, thank you very much.
I accept all tips to improve the code.
MyIndex.htmlPage
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apontamentos da Produção</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<meta http-equiv="refresh" content="5">
<div id="data"></div>
<div class="grid-container">
<div class="container">
<div class="texto"> PAINEL-1 | APONTAMENTOS DA PRODUÇÃO</div>
<div class="clock"></div>
</div>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<br>
<!-- Tabela principal, apresentando os apontamentos -->
<table id="table" class="tablePrincipal">
<tr class="trPrincipal">
<th class="th2" style="width: 11%;">Data</th>
<th class="th2" style="width: 8%; ">Hora</th>
<th class="th2" style="width: 5%;">Orig.</th>
<th class="th2" style="width: 8%;">O.P.</th>
<th class="th2" style="width: 10%;">Produto</th>
<th class="th2" style="width: 8%;">Deriv.</th>
<th class="th2" style="width: 9%;">Peso (TN)</th>
<th class="th2" style="width: 7%;">Refugo (TN)</th>
<th class="th2" style="width: 13%;">Lote</th>
<th class="th2" style="width: 60%;;">Operador</th>
</tr>
</table>
<br>
</body>
<script>
// Tabela de apontamentos. Listagem.
// Aqui é onde é feito o push de informações, chamando pelo caminho e colocando o ID da tabela que ele vai levar as informações
window.onload = function () {
fetch('http://localhost:3000/teste')
.then(response => response.json())
.then(data => {
console.log(data);
var table = document.getElementById('table');
// Primeiro define a variavel, e coloca o comando para inserir uma linha, é tudo organizado por rows
for (var i = 0; i < 7; i++) {
var row = table.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
// Queria trabalhar com os dados separadamente, tentar criar um <p> e colocar um dado para apresentar.
// Queria tentar fazer um calculo com essa variável, mas não funciona assim
var cell11 = cell7 * 2;
// Aqui chama a variavel e coloca a linha na tabela
cell1.innerHTML = data[i][0];
cell2.innerHTML = data[i][1];
cell3.innerHTML = data[i][2];
cell4.innerHTML = data[i][3];
cell5.innerHTML = data[i][4];
cell6.innerHTML = data[i][5];
cell7.innerHTML = data[i][6];
cell8.innerHTML = data[i][7];
cell9.innerHTML = data[i][8];
cell10.innerHTML = data[i][9];
}}
)}
</script>
</html>
This is my Index.js where I make a selection and send the data
const express = require('express');
const oracledb = require('oracledb');
const app = express();
var cors = require('cors')
app.use(cors())
const http = require('http');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// Connection details for the Oracle database
const connectionString = '';
const user = '';
const password = '';
// Connect to the database
app.get('/teste', (req, res) => {
// within the endpoint, query the database
oracledb.getConnection(
{
connectionString: connectionString,
user: user,
password: password
},
function teste(err, connection) {
if (err) {
console.error(err.message);
return;
}
console.log('Conexão deu certo!');
const query = 'SELECT DATREA,HORREA,CODORI,NUMORP,CODPRO,CODDER,QTDRE1,QTDRFG,CODLOT,OPERADOR from USU_VPROEXT ORDER BY DATREA DESC, HORREA DESC';
connection.execute(query, [], (err, result) => {
if (err) {
console.error(err.message);
return;
}
console.log('Banco de Dados Atualizado');
console.log();
// return the results to the user
res.json(result.rows);
});
});
});
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});