Displaying variables from Node.js Express app in Jade filej

Question

I have a very simple jade page that isn't correctly displaying all variables passed into it from the javascript route. I have tried the way that is described in this answer but it isn't working in my case. I am simply trying to display 3 variables: the title of a page and two button texts.

Only the title displays correctly so far and the button text's do not display at all.

This is the code in routes/index.js

 /* GET home page. */
 router.get('/', function(req, res, next) {
   res.render(                                                                         
     'index',
     {locals:{                                                                         
         title: 'Real-Time Music Collaborator',
         buttonText1: 'Login',
         buttonText2: 'Start Creating',
     }}
   );
 });

This is the code in views/layout.jade

doctype html
html.full-screen
   head
 title= title
 link(rel='stylesheet', href='/stylesheets/style.css')
body.full-screen
 block content

And this is the code in the views/index.jade

extends layout

block content
  div.base-background-colour.no-margin.height-20.padding-100
    h1.centre-text.dark-grey-colour.no-margin= title
  button
    h3.centre-text.dark-grey-colour= buttonText1
  button
    h3.centre-text.dark-grey-colour= buttonText2

What confuses me is how the title variable works fine even if I change it to use = pre-appended but no matter what I try for the two button texts it never displays. In the rendered html the button texts are just not there, so it isn't a styling issue caused by the classes.

I'm running express version 4.14.0 if that helps. Thank you!

Answer 1

Do not define your objects inside locals . Just pass through an an anonymous object like

app.get('/', function(req, res) {
  res.render('index', {
    var1: 'myVariable'
  })
})

then remove the locals definition, like this p #{myVariable}