带有 if 和 else 语句的 forEach 循环

Question

所以标题可能不是对我的问题的最佳描述，因为我真的不知道如何总结问题。我的数据库中的每个事件都有一个 forEach 循环，每个事件都被归类为 type = “trip”、“ropes course”或“other”。我对每种类型的事件都有一个部分，但我想要一种方法，如果该部分中没有事件，我无法显示bannertron 标题，如果整个数据库中没有事件，我可以显示不同的 HTML。我的代码看起来也很 WET，我希望有任何关于如何干燥此页面的建议。

<% include partials/header %>
<div class="image-text">
  <img src="../images/trip-photo.jpg" class="bannertron">
  <div class="centered">Upcoming Trips</div>
</div>
<div class="container event">
  <% events.forEach(function(event){ %>
  <% if(event.type === "trip"){ %>
    </br>
    <h4><strong><%= event.title %></strong></h4>
    <span><%= event.startdate %> - </span>
    <span><%= event.enddate %></span>
    <h6><strong>Location: </strong><%= event.location %></h6>
    <p><%= event.description %></p>
    <% if(currentUser && (currentUser.admin === true)){ %>
      <a href="/calendar/<%= event._id %>/edit" class="btn btn-warning">Edit</a>
      <form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
        <button class="btn btn-danger">Delete</button>
      </form>
    <% } %>
    <hr class="event-hr">
    <% } %>
  <% }); %>
</div>
<div class="image-text">
  <img src="../images/climbing-photo.jpg" class="bannertron">
  <div class="centered">Upcoming Climbing Days</div>
</div>
<div class="container event">
  <% events.forEach(function(event){ %>
  <% if(event.type === "ropescourse"){ %>
    </br>
    <h4><strong><%= event.title %></strong></h4>
    <span><%= event.startdate %> - </span>
    <span><%= event.enddate %></span>
    <h6><strong>Location: </strong><%= event.location %></h6>
    <p><%= event.description %></p>
    <% if(currentUser && (currentUser.admin === true)){ %>
      <a href="/calendar/<%= event._id %>/edit" class="btn btn-warning">Edit</a>
      <form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
        <button class="btn btn-danger">Delete</button>
      </form>
    <% } %>
    <hr class="event-hr">
    <% } %>
  <% }); %>
</div>
<div class="image-text">
  <img src="../images/other-photo.jpg" class="bannertron">
  <div class="centered">Other Events</div>
</div>
<div class="container event">
  <% events.forEach(function(event){ %>
  <% if(event.type === "other"){ %>
    <h4><strong><%= event.title %></strong></h4>
    <span><%= event.startdate %> - </span>
    <span><%= event.enddate %></span>
    <h6><strong>Location: </strong><%= event.location %></h6>
    <p><%= event.description %></p>
    <% if(currentUser && (currentUser.admin === true)){ %>
      <a href="/calendar/<%= event._id %>/edit" class="btn btn-warning">Edit</a>
      <form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
        <button class="btn btn-danger">Delete</button>
      </form>
    <% } %>
    <hr class="event-hr">
    </br>
    <% } %>
  <% }); %>
</div>
<% include partials/footer %>

理想情况下，我可以遍历事件，检查它是哪种类型，将其放在相应的区域中，如果没有类型，则显示一些文本，例如“没有安排的事件”，如果有总共没有事件，显示其他内容。

Answer 1

如果是我，我会在节点文件中将事件拆分为 3 个不同的数组，而不是在 ejs 文件中将它们全部排序。 Array.prototype.filter 命令对此很有用。它的好处是它返回一个新数组，其中只有对您传入的函数返回 true 的项。它不会改变原始数组，只是传入一个新数组。您可以执行类似

var trips = events.filter(function(event){
   return event.type == "trip";
});
//do similar for "rope course", and for "other" you could do something like
return event.type != "trip" && event.type != "rope course"
// for the return statement.

你可以做一个

if(events.length == 0){
// show different html file
} else {
// show the html file with events, passing in the arrays
}

确保将所有数组传递到 ejs 文件中。对于每个数组，您可以执行类似的操作

if(trips.length != 0){
// show banner and stuff
}

为这三个人都这样做。
希望这会有所帮助！