How to pass a Node.js variable to the inside of a Pug script tag?

Question

I am trying to take a variable I've sent to my Pug page from Node.js and place it inside a javascript variable inside of a pug script tag. (Sorry if that is confusing) My node.js code is as follows:

app.get('/profile', function (req, res) {
  var session = req.session;
  res.render('./login.pug', { username: session.uniqueID });
});

When I use the variable in my pug page code like this

input(type='text', id='username', value=username)

it works fine. The value will be changed to the username that the variable holds. But when I try to put the same value in my script tag such as

script.
        var currentuser = username;

the browser console will tell me that username is undefined. How do I properly pass the value of the variable username inside the script tag? Also is there a way to pass the variable username into an external js file as well? Thank you in advance for your help!

Polenta

try : var currentuser = !{JSON.stringify(username)}; //works for me – Whittling

Answer 1

Normally in pug you can substitute variables like that, but we're in a Plain Text block when we put the period at the end of the script tag and regular variable substitution doesn't work in these blocks:

script.
      ^

In order to output dynamic JavaScript in a Plain Text block we need to use unescaped interpolation to do it with !{...}.

If you are just trying to output a single string value just put quotes around the interpolation tag:

var currentuser = '!{username}';

When you have a more complex JavaScript object you can stringify the variable, and you won't need quotes for this as it's valid JavaScript output.

route:

res.render('test', {
  user: {"name": "Joe Smith"}
});

template:

var currentuser = !{JSON.stringify(user)};

outputs:

<script>var currentuser = {"name":"Joe Smith"};</script>

---

In case you're curious, the #{...} escaped interpolation inserts invalid characters and looks like this:

template:

var currentuser = #{JSON.stringify(user)};

outputs:

<script>var currentuser = {&quot;name&quot;:&quot;Joe Smith&quot;};</script>

Ximenez

Answer 2

A simple trick to do this:

• Create an input hidden in HTML section with special id (I'm using #username in example code below)
• Get value from input by Id in JS section

//- HTML Section
input(type='text', id='username', value= username)

//- Script Section

script.
  var currentuser = document.getElementById("username").val();

Wholewheat