EJS ReferenceError-CodePudding

I'm trying to pass data from an Express route to EJS but I keep on getting a ReferenceError. This should be a page that renders a table of employees' email addresses and their roles:

<%- include("./partials/header"); -%>
<body >
    <%- include("./partials/navigation"); -%>
    <div >
        <table >
            <thead>
                View Employees
            </thead>
            <th>
                Email
            </th>
            <th>
                Role
            </th>
            <% employees.map((employee) => { %>
                <tr>
                    <td><%=employee.email%></td>
                    <td><%=employee.role%></td>
                </tr>
            <% }) %>
        </table>
    </div>
</body>

Here is the Express routing code:

app.get('/view_employees', (req, res) => {
    const employees = [
        {email: '[email protected]', role: 'Administrator'},
        {email: '[email protected]', role: 'HR Representative'},
        {email: '[email protected]', role: 'HR Representative'},
        {email: '[email protected]', role: 'Employee'},
        {email: '[email protected]', role: 'Employee'},
        {email: '[email protected]', role: 'Employee'},
        {email: '[email protected]', role: 'Employee'},
    ];

    res.render('/view_employees', {employees: employees});
});

This is the full error. Tl;dr employees is not defined in the EJS:

ReferenceError: A:\Node\workplace_incident_reporter\src\views\view_employees.ejs:15
    13|                 Role

    14|             </th>

 >> 15|             <% employees.map((employee) => { %>

    16|                 <tr>

    17|                     <td><%=employee.email%></td>

    18|                     <td><%=employee.role%></td>


employees is not defined
    at eval ("A:\\Node\\workplace_incident_reporter\\src\\views\\view_employees.ejs":16:8)
    at view_employees (A:\Node\workplace_incident_reporter\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (A:\Node\workplace_incident_reporter\node_modules\ejs\lib\ejs.js:274:36)
    at exports.renderFile [as engine] (A:\Node\workplace_incident_reporter\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (A:\Node\workplace_incident_reporter\node_modules\express\lib\view.js:135:8)
    at tryRender (A:\Node\workplace_incident_reporter\node_modules\express\lib\application.js:657:10)
    at Function.render (A:\Node\workplace_incident_reporter\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (A:\Node\workplace_incident_reporter\node_modules\express\lib\response.js:1039:7)
    at A:\Node\workplace_incident_reporter\app.js:18:9
    at Layer.handle [as handle_request] (A:\Node\workplace_incident_reporter\node_modules\express\lib\router\layer.js:95:5)

CodePudding user response：

This is just a temp answer, to help indicate what the HTML table structure should be (it likely, by itself, will not solve your issue)

<%- include("./partials/header"); -%>
<body >
    <%- include("./partials/navigation"); -%>
    <div >
        <table >
            <caption>View Employees</caption>
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody>
            <% employees.map((employee) => { %>
                <tr>
                    <td><%=employee.email%></td>
                    <td><%=employee.role%></td>
                </tr>
            <% }) %>
            </tbody>
        </table>
    </div>
</body>

CodePudding user response：

This is another case of making sure you test your app with nodemon app.js instead of node app.js.