How to transfer arrays from Node JS to HTML

Question

I'm querying data from an Azure SQL database following the documentation on Microsoft docs using NodeJS.

Now that I have the data, I'm planning to visualize it using Plotly.js on a plain HTML. But, honestly I'm a noob on NodeJS stuff and I don't know how to transfer the data (that I stored in JS arrays) from the Node JS script and catch it on the HTML (being more precise, catch it on the Javascript code in<script></script> tags so I will be able to fill the Plotly.js visualization).

It would be something like this:

On Node.js script:

Get the data from Azure (done)
Pass the data to the HTML or somewhere the HTML could catch it

In the HTML markup:

<html>
<head>
</head>
<body>
    <script>
        // CATCH THE DATA RIGHT HERE

        // PROCESS THE DATA USING PLOTLY.JS

        </script>
</body>
</html>

I've been looking through Restify and ExpressJS but sincerely I don't get it that much, and I haven't found an example that catches the data on the "javascript of the html".

I'm not asking for code (I don't want to be misunderstood. Still, some example would be awesome), but I'd like to know where can I find something similar, a tool, a library or something that would help me to achieve this.

Thanks!

You need to create an api, fastest way would be azure functions — Mike Ezzati
– Mike Ezzati, Commented Feb 27, 2018 at 22:01
@IlFollio If you have a situation where you want to include this data in your page, you can inject it into your script tag by first serializing it as JSON. — Brad
– Brad, Commented Feb 27, 2018 at 22:18

Mass C · Accepted Answer · 2018-03-02 01:47:15Z

1

At first rather than create a server and create an API to serve that JSON data you could instead create a json file using the node fs module like so:

const fs = require('fs');

//example of the data you got from the Azure SQL database
const data = [ 1, 2, 3, 4, 5, 6];

fs.writeFileSync('data.json', JSON.stringify(data));

This will create the file in the current directory.

then in your HTML you can import that JSON file using jQuery:

$.getJSON('data.json',function(data){
     //display your data however you want.    
     console.log(data);
})

It should work without going through too much hassle.

And when you want to take the longer route you can install express and write a small express server with an route endpoint that serves the data.

edited Mar 2, 2018 at 1:47

answered Feb 27, 2018 at 22:59

Mass C

414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Randy Casburn · Accepted Answer · 2018-02-27 21:51:37Z

In C# you would have an MVC controller that would populate a template with data retrieved from a model. You can do the same thing with NodeJS/Express and a templating engine. In this case you would populate the template using JavaScript (nodejs) prior to sending to the browser.

The other option would be to use a SPA structure where you use the browser SPA to make AJAX requests for data and send that data from you nodejs/express REST service.

You likely would not do a mixture of both.

If you want a great starting point that would "sort of" look like a traditional web app, investigate the Express Application Generator: https://expressjs.com/en/starter/generator.html

If gives you everything you need and the docs answer you question directly.

Elias Toivanen · Accepted Answer · 2018-02-27 22:11:29Z

0

I would recommend to do what you want in two steps:

Implement a dedicated end point for getting the data to be visualized as JSON string (GET /data/?whatever=1234)
Program your Plotly.js script to request for the data it needs via AJAX and show it as soon as the DOM is ready.

The big idea is that you're creating a resource for the data and an URL for getting that resource. Drawing a plot of the data is just one application; there could be many other things you may want to do with it in the future.

answered Feb 27, 2018 at 22:11

Elias Toivanen

8487 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to transfer arrays from Node JS to HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related