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

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 >
            <thead >
              <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>

CodePudding user response：

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

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

// EJS
<!-- admin table -->
<table >
  <thead >
    <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 >
    <thead >
      <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:

// DB interaction 
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 });
    });
  });
});

// EJS
<!-- admin table -->
<table >
  <thead >
    <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 >
    <thead >
      <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>

CodePudding user response：

This is very easy to achieve by using the async/await syntax. Fetch the users, fetch the admins, pass both objects together to your template.

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

    const users = await User.find({accountrole: "user"})
                        .lean() // Return simple JSON data, not a Mongoose objects collection (simpler and faster)
                        .exec(); // Returns a true Promise, not just a thenable. You can then await the Promise

    const admins = await User.find({accountrole: "admin"}).lean().exec();
    
    res.render('portal',{users, admins}); // or {users:users, admins:admins}, same thing
})