Node.js - where to find incoming parameter in the HTML/document

Question

I have the following function in my Node.js code that renders an HTML page and passes it an javascript object called htmlParamObj

exports.getPage = function (req, res, next) {

    var htmlParamObj= {
        propertyOne: 'yada',
        propertyTwo: 'yada yada'
       };
    res.render('myPage.html',htmlParamObj);

};

I can access the incoming parameter (htmlParamObj) with EJS like so: <% propertyOne %>, but I don't know how to access htmlParamObj via the document itself. I believe htmlParamOb' will be attached to the document of the html - but what field in the document can I find it in? Is it in the head, the body, the childNodes? Where?

yes I can do that, but I need to in turn pass it to a script that's not in the html, maybe I can access it the same way with EJS, but I wanted to know if the variable was also attached to the document... — Alexander Mills, Dec 23 '14 at 01:11
this script that I am talking about is not inside the HTML file, it is an outside script, so I assume either I pass the variable to the outside script directly, or I attach the variable to the DOM and then then access it in the outside script via the document... — Alexander Mills, Dec 23 '14 at 01:14
this article is trying to get at the same problem http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/ — Alexander Mills, Dec 23 '14 at 01:19
This seems to be a duplicate, or close to it, of a question I posted: https://stackoverflow.com/questions/26133910/res-render-locals-location-on-frontend. — trysis, Dec 23 '14 at 02:15

score 2 · Answer 1 · answered Dec 23 '14 at 02:07

2

The object passed is only used while rendering the HTML, and will not be passed to the browser in any way.

If you need that data inside the page you need to put it there.

The solution I've used when I need to pass complex data to a client side script is to place a script tag near the top of my HTML EJS file and populate that with my data. For example I might add the following to my template:

<script>
    window.MY_DATA = <%= JSON.stringify(myData) %>
</script>

Notice that since JSON is a subset of javascript, I can use JSON.stringify to serialize my data into a form suitable for placement inside a script tag, and assign it to whatever variable I want.

The limitation here is that you can't send any data that can't be serialized with JSON.stringify. Not a heavy burden, but could trip you up if you want to send a function or other object.

answered Dec 23 '14 at 02:07

Hargo

1,256
1
16
24

hi Hargobind, see my answer below, I don't think you have to stringify the object, why not just leave it as is? – Alexander Mills Dec 23 '14 at 03:31
That's fine if you're value is a string, the problem is for more complex data you need some way to serialize and deserialized the data. Also `JSON.stringify` provides a convenient way to avoid any security issues inside a script tag since it will correctly escape any odd characters. – Hargo Dec 23 '14 at 03:32
will get back to you on this later, if you could avoid deserializing/serializing that would be an advantage, but maybe you can't. all in all, this is stupid. – Alexander Mills Dec 23 '14 at 03:34
is there a way to retrieve the object whole instead of as a string on the front-end from the back-end? – Alexander Mills Dec 23 '14 at 08:08
That what my approach of using `JSON.stringify` on the server and substituting it unquoted into the script tag achieves. When the browser reads the script tag it will parse the JSON data (since JSON is a strict subset of JavaScript) and place the results into whatever variable you have assigned it to. – Hargo Dec 23 '14 at 15:32

score 0 · Answer 2 · answered Dec 23 '14 at 01:26

The solution I found is to define a global attribute in my HTML like so:

<a name="team" value="<%=team._id%>"></a>

then I can access it in any script like so:

<script>
var team = document.getElementsByName('team');
</script>

This will return the correct object. However, I don't think this is the best answer, especially given that any globally defined variable is usually a bad idea. I am hoping another answer is given to this question.

Node.js - where to find incoming parameter in the HTML/document

2 Answers2