Dynamic HTML to display Oracle Table using nodejs
This post is in continuation from my earlier post Build REST API using Oracle Cloud ADB where I showcased creating rest api based on oracle database.
Now we will see how to use that restapi and create a webserver hosting a simple webpage to display the data returned from api.
Create index.js file and copy below code
Here we are calling an html page which will display data
app.get(‘/’, function (req, res) {
fs.readFile(__dirname + “/index.html”)
.then(contents => {
res.setHeader(“Content-Type”, “text/html”);
res.writeHead(200);
res.end(contents);
})
.catch(err => {
res.writeHead(500);
res.end(err);
return;
});
})
Now lets see important section of index.html
on click of a button, a function is called which calls API. We are creating a dynamic table based on data
function CreateTableFromJSON(tname) {
fetch(`http://localhost:5000/table?tab=${tname}`)
.then(response => response.json())
.then(apiJsonData => {
renderDataInTheTable(apiJsonData);
})
function renderDataInTheTable(tabdata) {
var col = [];
for (var i = 0; i < tabdata.length; i++) {
for (var key in tabdata[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
} } }
// CREATE DYNAMIC TABLE
var table = document.createElement(“table”);
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement(“th”);
th.innerHTML = col[i];
tr.appendChild(th);
}
Advantage of dynamic html table is we do not need to think about how many columns the api will return.
Type node index.js to start service. Go to browser and type http://localhost:3000
You will see a field to enter name of oracle table. once you enter a table name and hit display, you will see table data.
You can download the sample code from github here
You can either clone repository or download zip file. Once you download type node install
run node index.js and you are good to go
