1

I am building a website in HTML, and I also have a node.js process running that will grab data from an npm package called better-sqlite3. I want to take that data, and show it on my website.

I am not exactly sure how to go about pushing the data over. I know how to spin up a server through the http module, but I do not know how to make it push the data to the site. I want this data-

{ name: 'xxxxxx', value: '15324 points (level 24)' } { name: 'yyyyyy', value: '9643 points (level 19)' }

Displayed on the site, and hopefully fit my design.

Any tips y'all can give me? Thanks ahead of time.

cody.figler
  • 23
  • 6
  • So the npm package just return javascript objects? If you want to display those look into how to work with js objects in your js and how to insert js strings into your html. it's the basics of JS – Robbeoli May 17 '19 at 22:59
  • Generally the client (browser) makes requests to a REST API on the server. If you want to push the data from the server without a client request you will probably need to use WebSockets. – Jake Holzinger May 17 '19 at 23:03
  • @Robbeoli, no. It is a database. It returns multiple different items, that is just what I need to be displayed. – cody.figler May 17 '19 at 23:32
  • U can use a templating engine in your website like ejs. Let me know if you want to know more about this. – Harshit Agarwal May 18 '19 at 11:53

2 Answers2

1

You cannot do this directly in HTML(it is mostly used for the layout of a webpage), you need some client side Javascript as well that connects to the server written in NodeJs. The communication is done through http protocol. The server exposes a RestApi and returns the object you specified to the browser where it is rendered.

anegru
  • 1,023
  • 2
  • 13
  • 29
1

I guess you want to use AJAX to get all the data you need. This is your server. (I'm using express, but you can do this without it)

var express = require("express");
var app = express();

//Just a setting for enable CORS (Cross-origin resource sharing )
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

//creating your object
var obj = { 
    name: 'xxxxxx', 
    value: '15324 points (level 24)'
}

//sending your object
app.get("/obj", function(req, res){
    res.json(obj);
});

app.listen("3002", function(){
    console.log("Server is Running");
});

And this is your HTML file with the AJAX request:

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="objPanel"></div>
        <script type="text/javascript">
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("objPanel").innerHTML = this.responseText;
            }
          };
          xhttp.open("GET", "http://localhost:3002/obj", true);
          xhttp.send();
        </script>

    </body>
    </html>
Anderson
  • 97
  • 2
  • 11