如何使用EJS和Mongoose在一個路徑中顯示兩個表格

我正在做一個簡單的專案。我正在在線搜索解決方案，但找不到與我現在正在做的事情完全相同的任何事情。我的 MongoDB 中有一個集合表。我想顯示兩個篩選角色的顯示。一張表用于管理員，然后一張表用于用戶。

請參閱示例表集合的影像

這是我的 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});
});

這僅適用于一個表，因為我將帳戶角色：“用戶”放在括號內。請檢查代碼中的注釋，我也想放它，這樣我可以有兩個表，但過濾管理員和用戶。

然后這是我的門戶中的代碼。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>

uj5u.com熱心網友回復：

您可以通過將所有用戶傳遞給表來過濾客戶端

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

或者，您可以通過將兩個單獨的物件傳遞給客戶端來在服務器上進行過濾，每個角色一個：

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

uj5u.com熱心網友回復：

這很容易通過使用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
})

標籤：javascript 节点.js mongodb 猫鼬 ejs

上一篇：列出例外

下一篇：“this”沒有像我預期的那樣在Javascript中使用字串連接