Question

我创建了一个网站，允许用户创建和添加事件，现在我添加了搜索，以便用户可以搜索不同的事件，问题是当搜索的事件不存在时，它应该记录一条错误消息，内容为“找不到事件”，但此消息会根据当前存在的事件显示多次，而不是由于forEach()方法而仅显示一次。如果没有找到具有该名称的事件，我应该怎么做才能使其工作并仅显示一次错误消息。

search.ejs


<div class="container">
    <header class="jumbotron" style="padding-left: 0px; padding-top: 5px; padding-bottom: 5px;">
       <h2>Search Results:</h2>
    </header>
   <!-- <% console.log(search_event)%> -->
   <div class="row text-center">

        <% events.forEach(function(i){ %>

          <% if(i.name.includes(search_event)) { %>

         <div class="col-md-3 col-sm-6">                                              <!--Double cols to make the site responsive and mobile compatible-->
          <div class="thumbnail">
            <img src=" <%= i.image %>">
            <div class="caption">
              <h4> <%= i.name%> </h4> 
            </div>
            <p>
              <a href="/events/<%= i._id %>" class="btn btn-primary">More Info</a>
            </p>
          </div>
        </div>

        <% } else  { %>

           <h4> No such event exists </h4>
          <% } %>
       <% });%>

    </div>
</div>
<% include partials/footer  %>

Answer 1

您应该使用Array.prototype.filter预计算将显示多少个项目。

如果此数组有长度，则应迭代并显示它们。如果没有长度，则显示“无结果”。

var filteredEvents = events.filter(event => event.name.includes(search_event));

if (filteredEvents.length) {
 // forEach
} else {
 // no results
}

Answer 2

只需设置一个标志。并检查是否存在。如果打印一次，将不允许它进入。

<div class="container">
    <header class="jumbotron" style="padding-left: 0px; padding-top: 5px; padding-bottom: 5px;">
       <h2>Search Results:</h2>
    </header>
   <!-- <% console.log(search_event)%> -->
   <div class="row text-center">
        <% var error = false; %>
        <% events.forEach(function(i){ %>

          <% if(i.name.includes(search_event)) { %>

         <div class="col-md-3 col-sm-6">                                              <!--Double cols to make the site responsive and mobile compatible-->
          <div class="thumbnail">
            <img src=" <%= i.image %>">
            <div class="caption">
              <h4> <%= i.name%> </h4> 
            </div>
            <p>
              <a href="/events/<%= i._id %>" class="btn btn-primary">More Info</a>
            </p>
          </div>
        </div>

        <% } else  { %>
        <% if(!error) { %>
          <% error = true; %>
           <h4> No such event exists </h4>
          <% } %>
         <% } %>
       <% });%>

    </div>
</div>
<% include partials/footer  %>

Answer 3

您实际上可以使用直的CSS来执行此操作，并将no结果设置为显示：none，但是如果上一行为空，则具有样式规则可以显示该结果。

我已经为每个hte行添加了类名-搜索结果，但没有结果。然后只需使用：empty伪选择器和“ +”直接同级组合器即可切换显示状态。

.no-results-wrapper {
  display: none;
}

.search-results-wrapper:empty + .no-results-wrapper {
  display: block;
}

<div class="container">
    <header class="jumbotron" style="padding-left: 0px; padding-top: 5px; padding-bottom: 5px;">
       <h2>Search Results:</h2>
    </header>
   <!-- <% console.log(search_event)%> -->
   <div class="row text-center search-results-wrapper">
        <% events.forEach(function(i){ %>
          <% if(i.name.includes(search_event)) { %>
         <div class="col-md-3 col-sm-6">                                           
          <div class="thumbnail">
            <img src=" <%= i.image %>">
            <div class="caption">
              <h4> <%= i.name%> </h4> 
            </div>
            <p>
              <a href="/events/<%= i._id %>" class="btn btn-primary">More Info</a>
            </p>
          </div>
        </div>
        <% }%>
      <% });%>
    </div>
     
     <div class="no-results-wrapper">
       <h4> No such event exists </h4>
     </div>

</div>
<% include partials/footer  %>

如何停止forEach（）循环仅显示一次错误消息？

3 个答案: