CODEWITHSUNDEEP
javascriptnode.jsexpresspug
spfurlong
spfurlong

Reputation: 33

Making Variable Passed Through Pug Available to Javascript

I have a Pug view that gives a set of links to a user. Before you get to the page the user has already authenticated and I have the username and their department in session variables. I can pass them as variables to the view like this:

res.render('landingpage', { title: 'Landing Page', 
                            username:   req.session.username,
                            department: req.session.department  });

And then in the view I have this line and it works:

p(class='navbar-text') Welcome #{username} from #{department}

which prints "Welcome Bob from Accounting" at the top with no problem.

But what I need to do is control whether some of the links are visible based upon the passed in department. (The department was discovered in the authentication function that passed the user onto the landing page and placed into the session.)

I was trying to place this into the document ready function but that doesn't work as it is undefined. What I need to do is to be able to change the visibility attribute and the onclick event for a link based upon the department. I have a JSON configuration file that tells me the departments allowed to access the link but I can't figure out how to translate that department variable into a javascript function that I can call to change the visibility.

I've tried to add it to a document ready function as department and #{department} but it just ends up either not knowing what it is or using it like the literal string. Any ideas of how to proceed?

Upvotes: 1

Views: 3302

Answers (3)

furt furt
furt furt

Reputation: 291

To clarify from the other solutions: the interpolated string must be nested within quotation marks. If you don't use the quotation marks around the #{} then javascript tries to read it as a variable.

Solution: 

'#{department}' === 'Accounting'

Explanation:

The solution evaluates to 'Accounting' === 'Accounting',which is true. The incorrect way would be to forget the quotes, and try #{department} === 'Accounting' which evaluates to Accounting === 'Accounting', which is the same as Undefined === 'Accounting', which is false.

Upvotes: 1

Yi Kai
Yi Kai

Reputation: 640

You can use a hidden input to pass the department info and get the input's value in js.

Example:

doctype html
html
    head
        title=title
        script(src='/node_modules/jquery/dist/jquery.min.js')
    body
        input#department(type='hidden',value=department)
        p(class='navbar-text') Welcome #{username} from #{department}
        img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;')
    script.
        $(document).ready( function() {
            var department = $('#department').val();
            if(department === 'Accounting') {
               document.getElementById('accessApproved').style.visibility = 'visible';
             }
        });

Upvotes: 0

spfurlong
spfurlong

Reputation: 33

Okay so I didn't post enough information for anyone to see what I was asking. Sorry. In the process of creating a new post and cutting it all down to just the part I needed I got it to work. This code works:

In the app.js file

'use strict';

var express = require('express');
var app = express();

app.set('views', './views');
app.set('view engine', 'pug');

var session = require('express-session');
var FileStore = require('session-file-store')(session);

var fileStoreOptions = {
                       path: './sessions',
                        ttl: 86400
                   };
var sessionOptions = {
                        secret: 'SecretKey',
                        resave: false,
                        saveUninitialized: false,
                        name: 'sessionId',
                        store: new FileStore(fileStoreOptions)
                    };
app.use(session(sessionOptions));

app.get('/landingpage', function(req,res,next) {
   req.session.accessToken = true;
   req.session.username = 'Bob';
   req.session.department = 'Accounting';
   res.render('landingpage', { title: 'Landing Page', 
                               username: req.session.username,
                               department: req.session.department  });
});

app.get('/images/DarkBlueIcon.png', function(req,res) {
          res.sendFile(__dirname + '/images/DarkBlueIcon.png');
});


app.get('/node_modules/jquery/dist/jquery.min.js', function(req,res) {
        res.sendFile(__dirname + '/node_modules/jquery/dist/jquery.min.js');
});

var server = app.listen(3000, function () { });

and this is in the pug file:

doctype html
html
    head
        title=title
        script(src='/node_modules/jquery/dist/jquery.min.js')
    body
        p(class='navbar-text') Welcome #{username} from #{department}
        img(id='accessApproved' src='/images/DarkBlueIcon.png' class='overlay' style='visibility: hidden;')
    script.
        $(document).ready( function() {
            if('#{department}' === 'Accounting') {
               document.getElementById('accessApproved').style.visibility = 'visible';
             }
        });

Gives you this: screenshot of Hello to Bob and Blue Icon

Upvotes: 1

Related Questions