我對我正在創建的應用程式有疑問,我正在使用Oracle 資料庫,並且我正在從資料庫中獲取資訊並透過表格將其呈現在螢幕上,但我想嘗試單獨處理這些數據,例如創建一個段落並顯示一個值。
我只能透過表格來呈現數據,還有其他方法嗎?如果有人能幫助我,非常感謝。
我接受所有改進程式碼的提示。
我的Index.html頁面
<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>
這是我的Index.js,我在其中進行選擇並發送資料
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'); });
假設:
由於無法準確重現該場景,我將重點關注客戶端,只理所當然地認為您的後端端點將正確返回一個數組,例如:
data[iRow][iColumn]
#這樣的假設來自這樣的行
cell1.innerHTML = data[i][0];
靜態定義的資料範例:
我不太確定資料是否只是數組的數組,或者是否有某種方法可以透過列名稱來尋址列值。無論如何,在這裡我們將堅持使用普通數組範例,因為它似乎按照您自己的話工作。
這裡我們定義了一個
data
數組,包含 2 行,每行 10 列:定義列名稱和順序:
我還可以說自從顯示 SQL 查詢以來從資料庫獲取的列的順序,這就是有序列表:
DATREA、HORREA、CODORI、NUMORP、CODPRO、CODDER、QTDRE1、QTDRFG、CODLOT、OPERADOR
我們在 js 中將其定義為字串數組,如下所示:
將行數組轉換為物件:
將行
data
轉換為物件數組,該數組具有以前面顯示的列列表命名的行列作為屬性:對於第一行資料(
data[0]
)將傳回如下物件:如何在文件中顯示該資料?
根據具體目標,您有無限種方法。實際上,您一開始並不需要將數組轉換為對象,但它使得透過名稱而不是使用索引號來存取其列變得更容易。
無論如何,例如,如果您需要將每一行顯示為單一段落的內容,並將其所有列資料的串聯作為內容:
演示:
這是到目前為止所說內容的現場演示: