Jade template, how to pass concrete object to pages?

Question

I have a jade template for my node.js project. I would like to send an object to the jade template and pass it to a function inside the page (to render something).

I am sure I send the right stuff from the server like this

res.render(__dirname + '/pages/viz.jade', {
    vizJson: newJson,
});

in the client I do something like this:

script
    sunburst(#{vizJson})

Thus, inside a script function, I want to call a function that creates my visualization with some json I created on the server side.

The problem is that when rendered I have something like sunburst([Object object]). I also tried to send the stringified version of the JSON but when I do JSON.parse(#{vizJson}) it complains like Unexpected token &.

The json I send is always different and has different level of depths.

Does anyone knows what to do?

Thanks

Answer 1

I hope this is going to help someone. I solved it like this:

script
    sunburst(!{JSON.stringify(vizJson)})

Notice the ! and the {...} wrapping the stringify method.

Answer 2

For this to work, you need to stringify on the server.

res.render(__dirname + '/pages/viz.jade', {
    vizJson: JSON.stringify(newJson),
});

Then, as you mentioned, parse the JSON on the client.

script
    sunburst(JSON.parse(#{vizJson}))

Hope that helps!

Answer 3

Oddly enough, for me the solution involved no calls to JSON.parse. I stringified my object on the server and just used the !{vizJson} method and got my object clientside.

Per the docs, unescaped string interpolation: http://jade-lang.com/reference/interpolation/