How to pass variable from jade template file to a script file

Question

I m having trouble with a variable  config  declared in a jade template file  index jade  that isn t passed to a javascript file  which then makes my javascript crash  Here is the file  views index jade    h1   title   script src    socket io socket io js   script type  text javascript     var config         config address      address      config port      port    script src    javascripts app js     Here is a part of my app js  server side      app use express bodyParser       app use express methodOverride       app use app router     app use express static   dirname     public          app configure  development   function      app set  address    localhost      app use express errorHandler   dumpExceptions  true  showStack  true           app configure  production   function      app use express errorHandler             Routes  app get      function req  res     res render  index         address  app settings address      port  app settings port          if   module parent      app listen app settings port     console log  Server listening on port  d   app settings port         Start my Socket io app and pass in the socket require    socketapp   start io listen app      And here is a part of my javascript file that crashes  public javascripts app js     function             var socket   new io Socket config address   port  config port  rememberTransport  false      I m running the site on development mode  NODE ENV development  on localhost  my own machine   I m using node-inspector for debugging  which told me that the config variable is undefined in public javascripts app js   Any ideas   Thanks

User · Answer

is for escaped string interpolation which automatically escapes the input and is thus more suitable for plain strings rather than JS objects  script var data     JSON stringify data     lt script gt var data     amp quot foo amp quot   amp quot bar amp quot    lt  script gt       is for unescaped code interpolation  which is more suitable for objects  script var data     JSON stringify data     lt script gt var data     quot foo quot   quot bar quot    lt  script gt   CAUTION  Unescaped code can be dangerous  You must be sure to sanitize any user inputs to avoid cross-site scripting  XSS   E g     foo   bar  lt  script gt  lt script gt  alert  quot xss quot          will become   lt script gt var data     quot foo quot   quot bar  lt  script gt  lt script gt  alert  quot xss quot      quot   lt  script gt   Possible solution  Use  replace   lt    g    lt       script var data     JSON stringify data  replace   lt    g    lt          lt script gt var data     quot foo quot   quot bar lt   script gt  lt script gt alert   quot xss  quot     quot   lt  script gt   The idea is to prevent the attacker to   Break out of the variable  JSON stringify escapes the quotes Break out of the script tag  if the variable contents  which you might not be able to control if comes from the database for ex   has a  lt  script gt  string  the replace statement will take care of it  https   github com pugjs pug blob 355d3dae examples dynamicscript pug

User · Answer

In my case  I was attempting to pass an object into a template via an express route  akin to OPs setup   Then I wanted to pass that object into a function I was calling via a script tag in a pug template  Though lagginreflex s answer got me close  I ended up with the following   script      var data   JSON parse    JSON stringify routeObj          funcName data    This ensured the object was passed in as expected  rather than needing to deserialise in the function  Also  the other answers seemed to work fine with primitives  but when arrays etc  were passed along with the object they were parsed as string values

User · Answer

It s a little late but     script    loginName    login      This is working fine in my script  In Express  I am doing this   exports index   function req  res     res render   index      layout false  login  req session login           I guess the latest jade is different   Merc   edit  added     after script to prevent Jade warning

User · Answer

Here s how I addressed this  using a MEAN derivative    My variables        NODE ENV   development          ui varables        var1  one       var2  two         First I had to make sure that the necessary config variables were being passed  MEAN uses the node nconf package  and by default is set up to limit which variables get passed from the environment  I had to remedy that   config config js   original   nconf argv      env   PORT    NODE ENV    FORCE DB SYNC        Load only these environment variables    defaults     store        NODE ENV   development            after modifications   nconf argv      env          Load ALL environment variables      double-underscore replaces   as a way to denote hierarchy    defaults     store        NODE ENV   development            Now I can set my variables like this   export ui varables  var1 first-value export ui varables  var2 second-value   Note  I reset the  heirarchy indicator  to       double underscore  because its default was      which makes variables more difficult to set from bash  See another post on this thread   Now the jade part  Next the values need to be rendered  so that javascript can pick them up on the client side  A straightforward way to write these values to the index file  Because this is a one-page app  angular   this page is always loaded first  I think ideally this should be a javascript include file  just to keep things clean   but this is good for a demo   app controllers index js    use strict   var config   require        config config     exports render   function req  res      res render  index         user  req user   JSON stringify req user     null         new lines follow      config defaults            ui defaults  JSON stringify config configwriter ui  replace   lt    g    lt          NOTE  the replace is xss prevention                  app views index jade   extends layouts default  block content   section ui-view      script type  text javascript        window user     user         new line here     defaults     config defaults ui defaults     In my rendered html  this gives me a nice little script    lt script type  text javascript  gt   window user   null            defaults     var1   first-value   var2  second-value     lt  script gt            From this point it s easy for angular to utilize the code

User · Answer

If you re like me and you use this method of passing variables a lot  here s a write-less-code solution   In your node js route  pass the variables in an object called window  like this   router get      function  req  res  next        res render  index             window                instance  instance                         Then in your pug jade layout file  just before the block content   you get them out like this   if window     each object  key in window         script              window   key      JSON stringify object      As my layout pug file gets loaded with each pug file  I don t need to  import  my variables over and over    This way all variables objects passed to window  magically  end up in the real window object of your browser where you can use them in Reactjs  Angular      or vanilla javascript

User · Answer

See this question  JADE   EXPRESS  Iterating over object in inline JS code  client-side    I m having the same problem  Jade does not pass local variables in  or do any templating at all  to javascript scripts  it simply passes the entire block in as literal text  If you use the local variables  address  and  port  in your Jade file above the script tag they should show up   Possible solutions are listed in the question I linked to above  but you can either    - pass every line in as unescaped text     at the beginning of every line   and simply put  -  before every line of javascript that uses a local variable  or    - Pass variables in through a dom element and access through JQuery  ugly   Is there no better way  It seems the creators of Jade do not want multiline javascript support  as shown by this thread in GitHub  https   github com visionmedia jade pull 405

[javascript] How to pass variable from jade template file to a script file?

Examples related to javascript

Examples related to node.js

Examples related to pug