Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


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

include ../www/index.html
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get('/', ensureAuthenticated, function(request, response){
    response.render('index', { data: {currentUser: request.user.id} });
});

app.use(express.static(__dirname + '/www'));

If you are inserting @Amberlamps snippet of code above an included static HTML file, remember to specify !!! 5 at the top, to avoid having your styling broken, in views/index.jade:

This will pass in your local_data variable before the actual static HTML page loads, so that the variable is available globally from the start.

Note
Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


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

@Costa depending on your view engine you may not be able to call JSON.stringify from the view. Instead you should stringify it in your controller and pass the string as a variable like {{{jsonData}}} (in case of handlebars).

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

I'm still seeing "data" as undefined inside the script tag.

Ok, this is better than my input field solution as it doesn't require parsing the JSON string back into an object or looking up the value of the input field with jQuery.

This isn't working for me, I get [object Object]. Might I be doing something wrong on the server side with stringify or parse?

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:

Note
Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


Exactly, Socket.io is overkill in this case. I'm looking for the lightest way to transport JS variables from the server to a client side script.

Have you heard of socket.io? (http://socket.io/). An easy way to access the object from express would be to open a socket between node.js and your javascript. This way data can be easily passed to the client side and then easily manipulated using javascript. The code wouldn't have to be much, simply a socket.emit() from node.js and a socket.on() from the client. I think that'd be an effective solution!

This is using a hammer to hit a bee. It adds lot of requests for almost nothing.

Note
Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


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

@Costa depending on your view engine you may not be able to call JSON.stringify from the view. Instead you should stringify it in your controller and pass the string as a variable like {{{jsonData}}} (in case of handlebars).

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

I'm still seeing "data" as undefined inside the script tag.

Ok, this is better than my input field solution as it doesn't require parsing the JSON string back into an object or looking up the value of the input field with jQuery.

This isn't working for me, I get [object Object]. Might I be doing something wrong on the server side with stringify or parse?

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:

Note
Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


jQuery.parseJSON( placeUrls );
res.render('search-directory', {
  title: 'My Title',
  place_urls: JSON.stringify(placeUrls),
});
var placeUrls = !{place_urls};

+1 on the note on leaving out the locals, I didn't know you could do that.

@braitsch : this is something new to me. I have done node and express projects at school but never ever I have used the locals object. Could you point me to the right docs/reading material please?

@iamrudra It's not necessary to preface the locals object in the render function with the word "locals". res.render('home', { { data : myObject } }) is fine vs res.render('home', { locals : { data : myObject } }) although I might suggest you do it anyway for the sake of clarity.

And then in the javascript in my jade file I use it like this:

In this example it's used for the twitter bootstrap typeahead plugin. You can then use something like this to parse it if you need to :

Notice also that you can leave out the locals: {} .

Note
Rectangle 27 1

node.js Accessing Express.js local variables in client side JavaScript?


Exactly, Socket.io is overkill in this case. I'm looking for the lightest way to transport JS variables from the server to a client side script.

Have you heard of socket.io? (http://socket.io/). An easy way to access the object from express would be to open a socket between node.js and your javascript. This way data can be easily passed to the client side and then easily manipulated using javascript. The code wouldn't have to be much, simply a socket.emit() from node.js and a socket.on() from the client. I think that'd be an effective solution!

This is using a hammer to hit a bee. It adds lot of requests for almost nothing.

Note
Rectangle 27 0

node.js Accessing Express.js local variables in client side JavaScript?


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

include ../www/index.html
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get('/', ensureAuthenticated, function(request, response){
    response.render('index', { data: {currentUser: request.user.id} });
});

app.use(express.static(__dirname + '/www'));

If you are inserting @Amberlamps snippet of code above an included static HTML file, remember to specify !!! 5 at the top, to avoid having your styling broken, in views/index.jade:

This will pass in your local_data variable before the actual static HTML page loads, so that the variable is available globally from the start.

Note
Rectangle 27 0

node.js Accessing Express.js local variables in client side JavaScript?


jQuery.parseJSON( placeUrls );
res.render('search-directory', {
  title: 'My Title',
  place_urls: JSON.stringify(placeUrls),
});
var placeUrls = !{place_urls};

+1 on the note on leaving out the locals, I didn't know you could do that.

And then in the javascript in my jade file I use it like this:

In this example it's used for the twitter bootstrap typeahead plugin. You can then use something like this to parse it if you need to :

Notice also that you can leave out the locals: {} .

Note
Rectangle 27 0

node.js Accessing Express.js local variables in client side JavaScript?


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

Jade noob here. I tried many different ways but I couldn't get this to work unless it was all on the same line like this (I'm using jade 1.3.1):

Otherwise it would always create var tags as if they were html elements. Maybe I doing something wrong with spacing, etc.?

Note
Rectangle 27 0

node.js Accessing Express.js local variables in client side JavaScript?


app.locals.base = { url:'/' };
base.url

You don't need to pass the locals variables in render call, locals variables are globals. On your pug file call don't put keys expression e.g #{}. Just use something like: base(href=base.url)

Note