Question

Curious if I’m doing this right and if not how you guys would approach this.

I have a Jade template that needs to render some data retrieved from a MongoDB database and I also need to have access to that data inside a client side JavaScript file.

I’m using Express.js and sending the data to the Jade template as follows :

var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });

Then inside of home.jade I can do things like :

p Hello #{data.name}!

Which writes out :

Hello stephen!

Now what I want is to also have access to this data object inside a client side JS file so I can manipulate the Object on say a button click before POSTing it back to the server to update the database.

I’ve been able to accomplish this by saving the “data” object inside a hidden input field in the Jade template and then fetching the value of that field inside my client-side JS file.

Inside home.jade

- local_data = JSON.stringify(data) // data coming in from Express.js
input(type='hidden', value=local_data)#myLocalDataObj

Then in my client side JS file I can access local_data like so :

Inside myLocalFile.js

var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);

However this stringify / parsing business feels messy. I know I can bind the values of my data object to DOM objects in my Jade template and then fetch those values using jQuery, but I’d like to have access to the actual Object that is coming back from Express in my client side JS.

Is my solution optimal, how would you guys accomplish this?

Answer 1

When rendering is done, only the rendered HTML is send to the client. Therefore no variables will be available anymore. What you could do, is instead of writing the object in the input element output the object as rendered JavaScript:

script(type='text/javascript').
    var local_data =!{JSON.stringify(data)}

EDIT: Apparently Jade requires a dot after the first closing parenthesis.