Question

因此标题可能不是对我的问题的最好描述，因为我真的不知道如何总结问题。对于数据库中的每个事件，我都有一个forEach循环，每个事件都归类为type =来作为“行程”，“绳索路线”或“其他”。对于每种类型的事件，我都有一个部分，但是我想一种方法，如果该部分中没有事件，则无法显示bannertron标头，如果整个数据库中没有事件，则可以显示不同的HTML。我的代码似乎也很湿，我很乐意就如何干燥此页面提出任何建议。

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

对所有这三个都做。
希望这会有所帮助！

使用if和else语句的forEach循环

1 个答案: