37

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

Masiar
  • 20,450
  • 31
  • 97
  • 140

4 Answers4

77

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.

Masiar
  • 20,450
  • 31
  • 97
  • 140
  • my json came back like this: `"{\"some_key\":...}"`. This could be the product of how I got the original json object, but for this example, I wrapped the output in an in-page JSON.parse("{\"some_key\":...}") method. The object seemed to work fine in the browser. – hellatan Apr 05 '12 at 05:38
  • 2
    Before you do this, make sure that your json object doesn't contain any unescaped user-controllable data! `` tags even inside a literal string in javascript will break the DOM, and allow arbitrary javascript execution (see http://escape.alf.nu/2/) – James Feb 17 '14 at 09:19
  • Thanks for the note @James. I guess, `!{JSON.stringify(vizJson).replace(//g, '>');}` should do it? – Simon A. Eugster Mar 21 '14 at 08:30
  • anyone else getting this error `Converting circular structure to JSON`? – hzhu Jun 01 '16 at 01:14
3

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!

btford
  • 5,631
  • 2
  • 29
  • 26
  • 2
    You don't need to call `JSON.parse` on the client because the code is already inside `script` tags. – fent Dec 08 '11 at 22:36
  • 1
    Sorry that didn't worked. That's one of the thing I tried. Thanks anyhow, I found out how to do it. – Masiar Dec 08 '11 at 23:28
2

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/

Airswoop1
  • 421
  • 4
  • 7
0

On the JS side, you send back 

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

On the HTML side, I have found that something like:

JSON.parse( '!{vizJson}' )

works.

Greg S
  • 99
  • 2
  • 5