CODEWITHSUNDEEP
javascripthtmlnode.js
Izael Souza
Izael Souza

Reputation: 138

Display data from a SQL database in an HTML table using node js/javascript

So I have created an HTML file and it has a table with several columns in it. What I need to do is to find a way to display data from my SQL database into this HTML table. I have created a connection with the database using Node, but I have no idea how to display the data in the table. I have been looking everywhere but all I can find is PHP code, and I do not want to use it. I need it to be in Node. How should I start this? Thank you all. Here is what I have so far regarding the HTML:

    <div id="table">
        <table align="right" cellspacing="0" cellpadding="5">
            <tr>
                <th>Match </th>
                <th>Time</th>
                <th>Red 1</th>
                <th>S</th>
                <th>Red 2</th>
                <th>S</th>
                <th>Red 3</th>
                <th>S</th>
                <th>Blu 1</th>
                <th>S</th>
                <th>Blu 2</th>
                <th>S</th>
                <th>Blu 3</th>
                <th>S</th>
                <th>Red Sc</th>
                <th>Blu Sc</th>
            </tr>
        </table>
    </div>

Regarding the Javascript file, I have created a connection with the database from Azure and a SELECT query for retrieving data from it. Now, I just need to put the data that I have inside the HTML table above.

Upvotes: 2

Views: 5051

Answers (1)

Techuila
Techuila

Reputation: 1287

Just an example, you'll get the idea.

Nodejs: 

var express = require('express')
var app = express()

app.get('/getData', function(req, res) {
    ... // Get data from database
})

html:

<table>
  <thead>
    <th>id</th>
    <th>name</th>
  </thead>
  <tbody id="place-here"></tbody>
</table>
<script>
  $.get('/getData', {}, function(result) {
    let res = '';
    result.forEach(data => {
      res += `<tr><td>${data.id}</td><td>${data.something}</td></tr>`
    })
    $('#place-here').html(res)
  });
</script>

Upvotes: 1

Related Questions