CODEWITHSUNDEEP
javascriptnode.jsejs
hh54188
hh54188

Reputation: 15626

How to pass variable from back-end to front-end in node.js ejs template

I render my page like this:

response.render('index', {
    data: list // the `list` is an array variable
});

And in the front page, I want store the data as globe variable, so I tried:

<script>
   window.app = <%= data %>
</script>

but the result is :

window.app = [object Object],[object Object],[object Object]

So how can I do it in right way?

Upvotes: 5

Views: 10161

Answers (2)

dansch
dansch

Reputation: 6267

Here's a gist, because it can get confusing if some of your objects values have " or ' in them, and then you try to parse that on the frontend.

tl;dr - we escape slashes and quotes, since those will mess with parsing the stringified string.

https://gist.github.com/danschumann/ae0b5bdcf2e1cd1f4b61

the js:

myObject = { ... }
// This should cover all the bases for what kinds of text the object has.
this.injectString = JSON.stringify( myObject ).replace(/\\/g, '\\\\').replace(/"/g, '\\\"')

and the html:

We only worry about parsing now, since everything should have been properly escaped
<script>
  window.myObjectFrontend = JSON.parse("<%- @injectString %>");
</script>

notice the parse is being done on the frontend, so you have your object back, not just a string as you would in the previous answer ( which would also break since there were no quotes on the string ).

Upvotes: 3

Farid Nouri Neshat
Farid Nouri Neshat

Reputation: 30420

You can stringify the data as JSON, which is a subset of javascript, and will be parsed as the exact data structure. Also use <%- expression %> to make sure your javascript won't be escaped.

<script>
   window.app = <%- JSON.stringify(data) %>
</script>

Note that this won't include functions and it will throw on cyclic data structures. But stuff like [{ a : { b : 3 }}] should work fine. Dates are also converted to strings.

Upvotes: 6

Related Questions