如何使用 EJS 和 Mongoose 在一个路径中显示两个 table

Question

我正在做一个简单的项目。我正在网上搜索解决方案，但找不到与我现在正在做的事情完全吻合的任何内容。我的 MongoDB 中有一个集合 table。我想显示两个筛选角色的显示。一个 table 给管理员，然后一个 table 给用户。

Please see the image of the example table collection

这是我来自 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});
});

这只适用于一个 table 因为我把 accountrole: "user" 放在了 bracket.Please 检查代码里面的注释，我也想放它所以我可以有两个 tables 但过滤管理员和用户。

然后这是来自我的门户的代码。 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>

Answer 1

您可以通过将所有用户传递给 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>

或者，您可以通过将两个单独的对象传递给客户端来在服务器上进行过滤，每个对象对应一个角色：

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

Answer 2

这很容易通过使用 async/await 语法来实现。获取用户，获取管理员，将两个对象一起传递到您的模板。

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

如何使用 EJS 和 Mongoose 在一个路径中显示两个 table

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

javascript

node.js

mongodb

mongoose

ejs