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

niksoverload
March 31, 2022
270 views
1 vote
2 Answers

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>

Answers

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

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

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
})

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers