50

As a real beginner in EJS, I have two charts in my html page, so I want to use my partial twice:

<% include partials/spider-chart.ejs %>

But I need to pass some parameters inside the ejs to differentiate between graphs.

What is the best way?

Orkun
  • 6,998
  • 8
  • 56
  • 103
  • 1
    did you check the Zubair's answer? maybe you should reconsider which one is the accepted one. – tokland Jul 12 '18 at 10:08

4 Answers4

136

@Naeem Shaikh solution works. Though include also gives you more intuitive way of including a partial template and also passing context variables to that as found in documention section of ejs.

<ul>
  <% users.forEach(function(user){ %>
      <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>
Zubair Alam
  • 8,739
  • 3
  • 26
  • 25
  • 1
    if i try this, `
    <%- include folder/index , {user: user} %>
    ` i get `ENOENT: no such file or directory, open '/(folder/index.ejs'`     – vardha Feb 15 '17 at 14:50
  • 1
    You need to wrap parameters in a parenthesis. `
    <%- include ('folder/index' , {user: user}); %>
    `     – Zubair Alam Feb 17 '17 at 05:49
  • 11
    This should really be the accepted answer. The other way using a global variable has the smell of sphagetti code. It lacks encapsulation and relies on assumptions (e.g. that the var data is not used for anything else) – pscl May 24 '17 at 23:13
  • 1
    I am getting "cannot find include include file" error :( . `<%- include ('partials/navbar.ejs' , if(locals.login && login) {login:true }); %>` – Natesh bhat Dec 30 '17 at 05:15
  • maybe I'm late for the party, but the only way I found to get a `foreach` work with `include` template is by using `<% include user/show %>` as read [here](https://github.com/mde/ejs#includes) – Stefano Mar 05 '18 at 20:40
  • If you are getting an error doing `include (filename, data)`, remember to remove the space between `include` and the bracket `(`: `include(filename, data)` – David Callanan Apr 01 '18 at 13:43
  • While not applicable to the original question, note that if you do not pass a second argument to `include` then you get the same variables as in the initial file (knowing this tidbit would have saved me some searching). – John Cummings Jan 05 '22 at 21:50
34

I think you want to render two different charts using same partial ejs template, just by providing different data(within the main ejs file).

You can just define a variable, which will be assigned to the data, which the first chart will use, than include the chart.ejs file, again change the data, and include the partial ejs file(chart.ejs) again, so now you have two files which can use same variable(data), but can plot different chart based on value assigned to data.

For Example:

<% var data= 'data to be used by first chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

// re-initializing data for second chart
<% data= 'data to be used by second chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

where your spider-chart.ejs file could be something which will use data

spider-chart.ejs

    <li>
        <%= data %> // just an example
    </li>

here, as you use data, the data variable accessed by both charts will be different because you are reassigning values for data before every chart.

Orkun
  • 6,998
  • 8
  • 56
  • 103
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
15

You can pass single as well as multiple data here is how to do it

In render funtions

We can pass multiple data as an object like this

app.get("/account", function(req, res) {
  res.render("account", {
    name: 'Jon Snow',
    age: 35
  });
});

And then can access the data inside account using ejs simple template tags like this

<h2> hello <%= name %> </h2> <p> your age is <%= age %> </p>

In Partial views

Pass the data like this

<%- include('partials/logout', {name='triyon'}) %>

And access it like we did above

<h2> logged out <%= name %> </h2>

Hadi Mir
  • 4,497
  • 2
  • 29
  • 31
0

This is the best workaround by just passing the view file name as a context while rendering the base ejs file.

/base.ejs:

<html>
    <%- include(content) %>
</html>

/extra.ejs:

<div> some content which is to be added in base ejs file </div>

/controller.js:

res.render('base', { content: 'extra' })
akzarma
  • 179
  • 11