Как остановить цикл forEach () для отображения сообщения об ошибке только один раз? - PullRequest
Новая
       20

Как остановить цикл forEach () для отображения сообщения об ошибке только один раз?

0 голосов
/ 13 мая 2019

Я создал веб-сайт, который позволяет пользователям создавать и добавлять события, теперь я добавил поиск, чтобы пользователи могли выполнять поиск по различным событиям, проблема в том, что искомого события нет, в журнале должно отображаться сообщение об ошибке " События не найдены ", но это сообщение отображается несколько раз в зависимости от того, сколько событий присутствует в данный момент, вместо того, чтобы показывать его только один раз из-за метода 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  %>

Ответы [ 3 ]

1 голос
/ 13 мая 2019

Вы должны предварительно рассчитать, сколько элементов будет отображаться, используя Array.prototype.filter.

Если этот массив имеет длину, вы должны выполнить итерацию и отобразить их.Если длина отсутствует, выведите «no results». 

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

if (filteredEvents.length) {
 // forEach
} else {
 // no results
}
0 голосов
/ 13 мая 2019

На самом деле вы можете сделать это с помощью прямой 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  %>
0 голосов
/ 13 мая 2019

Просто установите флаг.и проверьте, если есть.он не позволит войти, если он напечатает один раз. 

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