How to Pass Variable from Jade Template File to a Script File

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

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.

How to pass variable from Jade to .JS file?

Without understanding exactly what you want this should at least get you closer to what you are asking for.

1) Add the route to handle the post where you can retrieve the values posted back in the form using req.body.

2) In your Pug/Jade template I indented the form elements so they are under the form, added a submit button, and changed the method of the form to post.

.JS

router.post('/', function(req, res) {
   console.log(req.body);
   res.redirect('/');
});

router.get('/', function(req, res) {
  var projectPathArray = [];

  async function main() {                       
    var projects = await _db.listProjects();
        projects.forEach(async (item) => {
          var pathy = item.path;
          projectPathArray.push(pathy)
             })

res.render('index', { title: 'Projects', projectPathArray:projectPathArray}); 

});

main(); 

.jade

extends layout

script(src="libs/jquery-1.11.3.min.js")
link(rel='stylesheet', href='/stylesheets/style.css')

block content
  h1= title

  p To start, please select a project

  html
   body 
    form#test-form(action='', method='post')
                                      ^  
      select#menu1(name='menu1', size=projectPathArray.length)
        each val in projectPathArray
          option=val
      button(type='submit') Submit

How do I pass variable from a Jade template file to a Javascript file?

Try adding a . character after the script, this tells Jade that you want a block of text inside a tag.

Here's your updated code.

html
    head
        script(type='text/javascript').
            var data = !{data}
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        title Title
        h1 Heading
        #div.test

EDIT - To set title to data.val

First you should change your response, remove JSON.stringify so you're returning an object not a string value.

res.render("aws.jade", {data : {'val' : 'This is a Test'}});

Then you should be able to access the data objects attributes and structure directly using dot notation, and assign it straight to the title element like this...

title= data.val

How to pass variable in jade template using jade.compileFile

You're mixing up two different syntax. You need to do either this:

img(src=base_link + "image.jpg")

or this

img(src="#{base_link}image.jpg")

How to pass variables to Pug's `script.` block?

You need to basically render your variables in such a way that the end result gets interpolated as valid JS. It can be done with: !{JSON.stringify(events)}

for (var event of !{JSON.stringify(events)}) ...

which should expand to:

for (var event of ["AD_START","AD_COMPLETE"]) ...

Note the !{} which is for unescaped interpolation, as opposed to the more frequently used #{} which in this case wouldn't work as it would expand to something like ["..."] (i.e. escaped quotes)

CAUTION: Unescaped code can be dangerous. You must be sure to sanitize any user inputs to avoid cross-site scripting (XSS). See: How to pass variable from jade template file to a script file?

Jade template - How to pass a data from View page to Edit page

This tutorial is one of many good starting points for you in this.

Basically, you need to set up a route for your edit page that takes the ID of the plant as part of the URL, then use it to retrieve the data for that plant. Feeding the result to the jade template lets it do its work:

app.get('/plant/:id', function(req, res){

  // plant id is available here as req.params.id

  if(req.params.id){
    // fetch data for plant with this id
    res.render('edit-plant', data);
  } else {
    // no id given, must be a new plant
    res.render('edit-plant', {});
  }

});

Then, on your list page just add the plant id to the href tag of your links:

each plant in plants
  a(href= '/plants/' + plant.id)= plant.name

pass variables to jade template

You might be rendering them as tags instead. View your source html post render.

Try using !{param} instead of #{param}.

How to pass a variable from Express to a Jade template

Darren Schnare wrote an article that explains how to figure this out:
http://darrenschnare.com/blog/2013/08/14/sharing-variables-with-jade-templates/

You need to place all markup in a root block then declare variables in this block in the template. All variables will be accessible to each scope that is a child of the the scope.

template.jade

doctype html

block page
    html
        head

        body
            | #{working}

            | #{notWorking}

            | #{notWorking2}

index.jade

extends template

- localVar = "Other Example"

prepend page
    - working     = "This is working"
    - notWorking  = expressVar
    - notWorking2 = localVar

---

Related Topics