Node.js and express + hbs - unexpected identifier when passing variable to template

Question

I have a node express app, and I am attempting to pass a variable through when rendering my index.hbs file, like so:

<!DOCTYPE html>
<html>
<body>
    Hello.

    <a href="/auth/facebook">Login with Facebook</a>

    {{req}} <!-- this works fine(ish) -->

    <script>
    var request = {{req}}; // This throws an error
    console.log(request);
    </script>
</body>
</html>

The {{req}} template variable gets outputted as [object Object] as expected, but when attempting to pass it through via javascript, I get Unexpected identifier thrown in console. I tried modifying to use triple curly braces instead of double curly braces but that didn't seem to make a difference.

What is the correct way to set template variables using javascript?

{{req}} is template syntax, not javascript syntax. Inside the script tag, normal javascript is expected and there it doesn't make sense — Reason, Feb 04 '18 at 09:52

yue you · Answer 1 · 2018-02-04T23:20:01.170

2

This is because your template engine is replacing {{req}} with only strings.

If you want to use {{req}} in your javascript tag. Using JSON.stringify(req) to pass in template engine as parameter and in your javascript tags using triple "triple-stash" {{{req}}} to parse the string into object

About triple-stash the doc can be found http://handlebarsjs.com/ in HTML Escaping part

Hope it helps

Edited:

Find similar answer here Passing an object to client in node/express + ejs?

edited Feb 04 '18 at 23:20

answered Feb 04 '18 at 09:59

yue you

2,206
1
12
29

Just what I needed to know. Thanks so much! – Neil Merchant Feb 04 '18 at 22:27
Glad I can help you – yue you Feb 04 '18 at 22:36
Actually, JSON.parse still doesn't appear to work in this case; a syntax error is still thrown. – Neil Merchant Feb 04 '18 at 22:52
1

I figured it out - I just needed to also use triple curly braces in the template along with JSON.stringify on the node side. – Neil Merchant Feb 04 '18 at 22:57
Yes you need to stringfy it from node side and in template side you parse it accordingly. Triple curly braces is using for making string without escaping value. I will update accordingly – yue you Feb 04 '18 at 23:12
@yueyou . You are my hero... I've been spending hours trying to fix this silly defect . Many thx. – zipzit Nov 18 '18 at 23:05

score 1 · Answer 2 · answered Feb 04 '18 at 09:59

1

I had this same problem with EJS. I was able to pass the object from my Express server to the template by stringifying the object:

//express server
res.render('index', {req: JSON.stringify(data)})

//template
var request = {req}

answered Feb 04 '18 at 09:59

JJJ

3,314
4
29
43

Node.js and express + hbs - unexpected identifier when passing variable to template

2 Answers2