How to display two table in one path using EJS and Mongoose

I’m doing a simple project. I was searching for the solution online but I can’t find anything that is exact to what I am doing right now. I have a collection table in my MongoDB. I want to display two displays that filters the role. One table for Admin, and then one table for User.

Please see the image of the example table collection

Here’s my code from app.js

app.get("/", function (req, res) {

  User.find({accountrole: "user"}, function(err, users) {
    res.render('portal',{users:users});


 // User.find({accountrole: "admin"}, function(err, admin) {
  //      res.render('portal',{admin:admin});
});

This works only in one table since I put the accountrole: "user" inside the bracket.Please check the comment inside the code,I wanna put it too so I can have two tables but filters the admin and user.

and then here’s my code from my portal. ejs

<table class="table table-hover citizen-table">
            <thead class="table-dark">
              <tr>
                <!-- <th scope="col">#</th> -->
                <th scope="col">Accout Role</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Email</th>
             
              </tr>
            </thead>
            <tbody>
              <% users.forEach(function(users){ %>
              <tr>
                <th scope="row"><%= users.accountrole %></th>
                <td><%= users.firstname %></td>
                <td><%= users.lastname %></td>
                <td><%= users.email %></td>
       
              </tr>
              <% }); %>
            </tbody>
          </table>

>Solution :

You could filter on the client by passing all users to the table

// Backend
app.get('/', function (req, res) {
    // Pass all users
    User.find({}, function (err, users) {
      res.render('portal', { users: users });
    });
  });  

// Frontend
<!-- admin table -->
<table class="table table-hover citizen-table">
  <thead class="table-dark">
    <tr>
      <!-- <th scope="col">#</th> -->
      <th scope="col">Accout Role</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <% users.filter(user => user.accountrole === "admin").forEach(function(users){ %>
        <tr>
          <th scope="row"><%= users.accountrole %></th>
          <td><%= users.firstname %></td>
          <td><%= users.lastname %></td>
          <td><%= users.email %></td>
        </tr>
    <% }); %>
  </tbody>
</table>

<!-- user table -->
<table class="table table-hover citizen-table">
    <thead class="table-dark">
      <tr>
        <!-- <th scope="col">#</th> -->
        <th scope="col">Accout Role</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <% users.filter(user => user.accountrole === "user").forEach(function(users){ %>
      <tr>
        <th scope="row"><%= users.accountrole %></th>
        <td><%= users.firstname %></td>
        <td><%= users.lastname %></td>
        <td><%= users.email %></td>
      </tr>
      <% }); %>
    </tbody>
  </table>

Or, you could filter on the server by passing two separate object to the client, one for each role:

// Backend 
app.get('/', function (req, res) {
  // Filter the users by role
  User.find({ accountrole: 'user' }, function (err, usersUser) {
    User.find({ accountrole: 'admin' }, function (err, usersAdmin) {
      res.render('portal', { usersUser, usersAdmin });
    });
  });
});

// Frontend
<!-- admin table -->
<table class="table table-hover citizen-table">
  <thead class="table-dark">
    <tr>
      <!-- <th scope="col">#</th> -->
      <th scope="col">Accout Role</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <% usersAdmin.forEach(function(users){ %>
        <tr>
          <th scope="row"><%= users.accountrole %></th>
          <td><%= users.firstname %></td>
          <td><%= users.lastname %></td>
          <td><%= users.email %></td>
        </tr>
    <% }); %>
  </tbody>
</table>

<!-- user table -->
<table class="table table-hover citizen-table">
    <thead class="table-dark">
      <tr>
        <!-- <th scope="col">#</th> -->
        <th scope="col">Accout Role</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <% usersUser.forEach(function(users){ %>
      <tr>
        <th scope="row"><%= users.accountrole %></th>
        <td><%= users.firstname %></td>
        <td><%= users.lastname %></td>
        <td><%= users.email %></td>
      </tr>
      <% }); %>
    </tbody>
  </table>