proper syntax to pass variable in jade

Question

I'm trying to pass one piece of test data from routes/index.js:

/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
  res.render('helloworld', { title: 'Hello, World!', data: {'val' : 'This is a Test'}})
});

to views/helloworld.jade:

extends layout

block content
  h1= title
  p Welcome to #{title}
    script(type='text/javascript').
    var data = !{JSON.stringify(data)};

my results in the browser is:

Hello, World!

Welcome to Hello, World!data = ;

I'm not getting any error messages, but how do I get the data to show up in the browser?

Thanks.

Answer 1

Did you bother reading the documentation at all?

All plain text begins indented on a new line with a pipe character.

extends layout

block content
  h1= title
  p
    | Welcome to
    !{title}
  script(type="text/javascript")
    | var data = JSON.stringify(
    !{data}
    | );

I can't actually tell what you're trying to do w/ the script but that's my best guess.

Answer 2

Here is the output of a variety of approaches, the first ones being the best. I don't think you want to stringify the object in routes/index.js, since then you can't mainpulate the data in your helloworld.jade file. So I left index.js as is. views/helloworld.jade:

extends layout

block content
  h1= title
  p These 2 work and are the same
  p #{data.val}
  p !{data.val}
  p Without the extension returns an object
  p #{data}
  p !{data}
  Trying to stringify almost works except has quotes
  p #{JSON.stringify(data)}
  p #{JSON.stringify(data.val)}
  p !{JSON.stringify(data.val)}
  p Trying to set a variable doesn't seem to work at all
  script(type='text/javascript').
    var newdata = !{JSON.stringify(data)};
  p The variable output
  p #{newdata}
  p bottom of file
  script(type='text/javascript').
    console.log("testing");

Here is the output:

Hello, World!

These 2 work and are the same

This is a Test

This is a Test

Without the extension returns an object

[object Object]

[object Object]
to stringify almost works except has quotes

{"val":"This is a Test"}

"This is a Test"

"This is a Test"

Trying to set a variable doesn't seem to work at all

The variable output

bottom of file

I couldn't figure out a way to set a variable and display it in the .jade file, but there undoubtedly is a way that I don't know about. Hopefully this helps others that run up against the same issues.

Answer 3

This works. In routes/index.js:

router.get('/helloworld', function(req, res) {
  res.render('helloworld', { title: 'Hello, World!', data:{'val':'This is a Test'}})
});

In views/helloworld.jade:

extends layout

block content
  h1= title
  p Welcome to #{title}
  script(type='text/javascript').
  var data = !{JSON.stringify(data)};

My browser output is:

Hello, World!

Welcome to Hello, World!
data = {"val":"This is a Test"};

But look at Answer 1 in this post: transfer data from jade to jquery and vice versa The code they have doesn't work. "JSON.stringify" doesn't work in the router file and if you indent "var" 2 spaces in the view file it also won't work. I see nowhere in the documentation any reason why that is. Next I need to actually use that "data" variable to print out in the html file, but can't find how to do it. I should be patient, but I'm ready to move on to a different template engine that Jade. Anyone else have similar frustration?