1

I am unsure how this would work exactly, and I am unable to find my answer from searching for it. I am working with a node and express server, and have been passing data to my front end ejs without issues. Now, I am trying to implement charts.js in my front-end, and that requires the data to be in a front-end javascript file. I know that to pass data to my ejs file, I use something like this:

res.render("dashboard", {data: data});

and to display the data in the ejs file, I use

<%= data %>

Now, what I would like to do, is basically the same thing, but instead of passing the data into an ejs file, I want to pass it into a javascript file, while still displaying the ejs file. Right now, I can't seem to figure out how I go from having my data in the express server, and returning it into a front-end javascript file. The flow I am looking for would be something like this:

In node:

data = []:
res.render("dashboard", {data: data});

and then the ejs file is rendered and data is passed into the front-end javascript file that is being used within the ejs file:

let data = <%= (data array passed from the node server here) %>

Of course, this is not the correct way to write the code, but this is the basic logic I am trying to implement.

I am sure this is something simple, but I can't seem to find the answer within my context here. Are there any resources where I can learn to do what I am trying to do? Thanks.

Zernst
  • 315
  • 4
  • 17

1 Answers1

1

You can't respond to a single request with both an HTML document and a seperate JavaScript file.

So you need to either:

  • Store the data somewhere and, in a separate endpoint, serve up some generated JavaScript and have a mechanism which identifies which data to serve up when the request is made. (NB: This is stupidly complex. Don't do it.)
  • Generate the JavaScript inline in the HTML document inside a <script> element. (You'll need to properly escape the data as JS to make sure you aren't subject to XSS).
  • Output the data into the HTML document (e.g. with data-* attributes or <meta> elements) and read it with static JavaScript.
  • Again, using a seperate endpoint: Serve up JSON with the data in it and read that with Ajax from a static JS file. (Again, you'll need a way to determine which data to send for that particular request).
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thank you so much for your help, using your third method seems to have worked in passing in the data. Thanks. – Zernst Jun 02 '20 at 18:26
  • The data seems to pass along nicely, but I am running into the issue that when I do this: data-transactions="<%= transaction_data %> " the entire array gets converted into one long string instead of an array, which I cannot parse through in the javascript file as separate numbers. Am I stuck with this data being just a string once it is input into the html file? Otherwise, putting the script directly into the ejs file works as well, but would this be the best practice to use? Thanks. – Zernst Jun 02 '20 at 18:43
  • Convert it to JSON before putting it in the attribute value, then parse it with JS. – Quentin Jun 02 '20 at 18:53