Jade templating “each” function returns empty object

Question

I've had a bug that has been bugging me for days. I'm pretty new to Node and the Jade templating system so bear with me: I'm looking to add stylesheets in the following way:

App.js (Express):

app.get('/', loadUser, function(req, res) {
 var User = req.user;
 // console.log(User.groups[2]);
 // var groups = User.groups.split(',');
 // OK DUh. This only gets called when the client has the script Socket.IO
 // and client runs socket.connect()

 getMessages(User, function(messages) {

  var locals = {
   scripts: [
    'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
    'index.js'
   ],

   stylesheets: [
    'index.css'
   ],

   user : User,
   messages: messages
  };

  console.log('ok');

  res.render('app.jade', {locals : locals});

 });

});

In layout.jade (which is executed with app.jade) I have:

!!! 5
html
 head
  title UI
  link(rel='stylesheet', href = 'stylesheets/reset.css')
  link(rel='stylesheet', href = 'stylesheets/layout.css')
  - var stylesheets = stylesheets || [];
            #{stylesheets}
  - each stylesheet in stylesheets
   - if(stylesheet.indexOf('http') >= 0)
    link(rel='stylesheet', href = stylesheet)
   - else
    link(rel='stylesheet', href = "stylesheets/"+stylesheet )

Plus more... I keep running into the same error:

9. ' - if(stylesheet.indexOf(\'http') >= 0)'

Object function () {
  var o = {}, i, l = this.length, r = [];
  for(i=0; i
  for(i in o) r.push(o[i]);
  return r;
} has no method 'indexOf'

Now.. the gotcha is that this exact template works in another application that passes in the exact same variables: I would REALLY appreciate any suggestions you guys have on this thorny issue!

Thanks! Matt Mueller

Answer 1

So here's your issue...

in this line:

res.render('app.jade', {locals : locals});

you are passing in locals ==> locals, which is a hash (ok, so I'm a PERL guy, I think JS calls them 'associative arrays')

So now inside your jade template we have the line:

 - var stylesheets = stylesheets || []; 

inside JADE, you have defined the variable "locals", but everything else is hidden under that, so the variable "stylesheets" is NOT defined (locals.stylesheets is defined instead). So this line of code sets the variable "stylesheets" to "[]"

So here's where I have to speculate. "indexOf" is a method of the Array object. Perhaps arrays constructed inside JADE don't have this method whereas arrays constructed in node.js DO have this method. Which would explain why you get an error trying to call "stylesheets.indexOf(...)"