如何停止forEach（）循環僅顯示一次錯誤消息？

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結果設置為display：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 %>