passing a variable from jade to javascript

Question

I am trying to pass a variable from the route handler to the javascript file.

express route that fetches home page is:

exports.home = function(req, res){

    var _ajaxData = [ ["#collections","collections", "Collections"],
                      ["#candidates","candidates", "Candidates"],
                      ["#entries","entriess", "Entries"],
                      ["#exits","exits", "Exits"]
                    ];

    res.render('home/home', { title: 'Welcome to My Web', _ajaxData: _ajaxData});
};

And my jade file looks like the following:

extends ../layout/base

block content
      each item in _ajaxData
        div(id= item[0]).col-md-6
              h3.panel-title= title
            .panel-body
              | Loading content...

  script(src='js/home.js')

And the content is loaded using ajax in home.js that looks like the following:

var ajaxData = JSON.stringify('!{_ajaxData}');
console.log(ajaxData);
// Further processing here

Problem: The console prints:

"!{_ajaxData}"

where I am looking to get the full array passed to the javascript.

Appreciate any insights

FYI: I realized that browser is fetching the home.js without any processing by express. However, I am still curious to know if there is any better way to do this. — Kiran
– Kiran, Commented Jan 21, 2014 at 16:15

bzupnick · Accepted Answer · 2014-01-21 16:29:52Z

22

Add this to your jade file

script(type='text/javascript')                                                   
  var local_data =!{JSON.stringify(data)};   
script(src='javascripts/myScript.js')

All your data should now be in local_data for your use in myScript.js

answered Jan 21, 2014 at 16:29

bzupnick

2,8244 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kiran Over a year ago

thanks worked with minor change:

script(type='text/javascript')                                                      | var local_data =!{JSON.stringify(data)};    script(src='javascripts/myScript.js')

Kiran Over a year ago

otherwise, its turning var into <var>

Jon Miles Over a year ago

You should add . character after the script e.g. script(type='text/javascript'). so that you code is treated as text and not more templating

Jed Watson Over a year ago

Jonathan is correct, for reference this changed recently. In older versions jade would understand that anything nested inside a script tag was a js block and not more templating; in recent versions (post 1.0.0 from memory) you need the trailing dot, or the pipe character.

Collectives™ on Stack Overflow

passing a variable from jade to javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related