Getting the url parameters in an ejs template

enducat picture enducat · Nov 21, 2013 · Viewed 24.4k times · Source

I am trying to create an ejs conditional based on a URL parameter, for example, if the test parameter exists at localhost:3000/page?test, then show a div, else dont show it.

My ejs template looks something like:

<% include header %>
<div class="row">
<%if (title !== "homepage") {%>
<%= title %>
  <div>
    <% include nav %>
  </div>
<%}%>
  <div>
  </div>
</div>
<% include footer %>

Is there a way to access the URL parameters directly from the ejs file? For example, the <%= title %> works fine, is there something like <%= req.query %>?

I am also using express.

Answer

adeneo picture adeneo · Nov 21, 2013

You can pass it easily as an object in the second argument to render()

app.get('/someurl', function(req, res, next) {
   res.render('filename', {query : req.query});
});

You can also use the locals variable

app.get('/someurl', function(req, res, next) {
   res.locals.query = req.query;
   res.render('filename');
});

which is very useful when used with a general route that runs before all the other routes, making the variable available in all the following routes

app.use(function(req, res, next) {
   res.locals.query = req.query;
   res.locals.url   = req.originalUrl;

   next();
});

and it's available in the file you're rendering as query etc

<% if (query == "something") { %>
    <div id="crazy_shit">
        <a href="<%- url -%>">Here</a>
    </div>
<% } %>

As a sidenote, if query for some reason isn't defined, you'll get an error in EJS for using an undefined variable, which can be annoying.

I usually solve this by using an object instead, as checking object properties does not trigger errors, and it's easy to make sure the object always has an initial value at the top of each EJS template.
It's done like this in the routes

app.user(function(req, res, next) {
   res.locals.stuff = {
       query : req.query,
       url   : req.originalUrl
   }

   next();
});

And then in the template

<% stuff = typeof stuff !== 'object' ? {} : stuff %>

// later on

<% if ( stuff.query == "something") { %>//does not throw error if property not defined
    <div id="crazy_shit"></div>         
<% } %>

which even if stuff.query is defined, the condition just fail and it doesn't throw an error like it would if stuff itself, or any other variable, wasn't defined.