How to pass Express.js variable to Jade/Pug unbuffered code?

Question

I have an index.js with the following code:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index',{
      "title":"Homepage",
      "navIndex":"reg",
      "navItems":[
         {"title":"Home", "link":"/" },
         {"title":"Register", "link":"/reg"}
      ]
  });
});

module.exports = router;

And I have index.pug:

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        block content
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-med-and-down')
                -
                    var navItems = #{navItems}

                    for(x = 0; x < navItems.length; x++)
                        li
                            a(href=navItems[x].link) navItems[x].title

For some reason I keep getting the "Unexpected block content" error.

I've tried adjusting my spacing, and I just can't seem to get it to work. I've looked at the documentation on unbuffered code, but I"m just not sure how to pass the navItems object from the index.js to the unbuffered code section of the pug file. I would assume you define a variable like I did ex. var navItems = #{navItems} . Is there any specific documentation on this? If not, what am I doing wrong, exactly? Thanks in advance.

Edit:

Updated index.pug is below. But it outputs "navItems[x].title" verbatim, not the value of the variable.

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-small-only')
                    - for(x = 0; x < navItems.length; x++)
                    li
                        a(href=navItems[x].link) navItems[x].title

Answer 1

You have a block statement in your index.pug file, which indicates that this file is normally intended to be inherited by other templates, which will provide the content for your block content .

I think removing block content statement from your index.pug should resolve your error. Or you can provide a default content to your block content .

You can read more here about Template Inheritance in Pug .

Regarding your updated code, I think the #{variableName} syntax is deprecated for attributes only (ie in Attribute Interpolation).

When using as part of content, you can use either of following:

a(href=navItems[x].link)= navItems[x].title
a(href=navItems[x].link) #{navItems[x].title}

Now, regarding the difference in indentation for the for loop, proper indentation is required if you are using Pug loops ie without a dash (-) at the start.

When you add a dash (-) at the start of a line, this line is treated as pure javascript, and then you need not indent the next line in most cases.