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

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


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 = {"name":"Joe Smith"};</script>


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 Sectioninput(type='text', id='username', value= username)//- Script Sectionscript.  var currentuser = document.getElementById("username").val();