javascript - 在循环内仅显示一次该项目

Question

我有这个代码：

<div id="container1300" class="container margin_60_35" style="padding-top: 87px;">
          <% if(datas.testdocs) {

            function ucfirst(str) {
              if (str.length > 0) {
                return str[0].toUpperCase() + str.substring(1);
              } else {
                return str;
              }
            };
            Object.entries(datas.docs).map(function ([cat, items]){
              %>
          <div class="row" style="padding-left: 15px;margin-bottom: 20px;">
            <h4 class="category"><%=ucfirst(cat)%></h4>
          </div>
          <div class="row">
            <%
            items.filter(function(item) {
              if (!datas.loggedIn && item.datas.status.toLowerCase() !== 'public') {
                return false; // skip
              }
              if (datas.isPrivate && item.datas.status.toLowerCase() === 'disabled') {
                return false; // skip
              }
              if (datas.isPrivate && item.datas.status.toLowerCase() === 'draft') {
                return false; // skip
              }
              return true;
            }).map(function (item) {%>
            <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="box_grid wow <%= item.datas.status.toLowerCase() %>">
                <a
                   href="/pages?slug=<%=item.datas.slug%>"
                   class="clickable"
                   title="<%= item.datas.title %>"
                   ><span></span
                  ></a>
                <figure class="block-reveal" style="height:210px;background: #000;background:url('<%=item.datas.image%>');background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;">
                  <div class="block-horizzontal"></div>
                  <% if (datas.loggedIn) { %>

                  <% if (datas.canEdit) { %>
                  <a
                     href="/edit-documentation?slug=<%=item.datas.slug%>"
                     class="editpages" data-toggle="tooltip" data-placement="bottom" title="Edit : <%=item.datas.title%>"
                     ></a>
                  <% } %>
                  <% if (item.datas.ghosted === 'false') {%> 
                  <% if (datas.canEditPages) { %>
                  <a
                     href="/editpages?slug=<%=item.datas.slug%>"
                     class="wish_bt" data-toggle="tooltip" data-placement="bottom" title="Edit Pages of : <%=item.datas.title%>"
                     ></a>
                  <% } %>
                  <% } else { %>
                  <a
                     href="#"
                     class="ghost-icon" data-code="<%-item.code%>" data-toggle="tooltip" data-placement="bottom"
                     ><i class="fas fa-ghost"></i></a>
                  <% } %>
                  <% } %>
                  <% if (parseInt(item.datas.language, 10) == 1) { %>
                  <a href="#" class="langfr"><i class="flag flag-fr"></i></a>
                  <% } else if (parseInt(item.datas.language, 10) == 2){ %>
                  <a href="#" class="langen"><i class="flag flag-gb"></i></a>
                  <% } else if (parseInt(item.datas.language, 10) == 3){ %>
                  <a href="#" class="langen"><i class="flag flag-de"></i></a>
                  <% } else if (parseInt(item.datas.language, 10) == 4){ %>
                  <a href="#" class="langen"><i class="flag flag-es"></i></a>
                  <% } else if (parseInt(item.datas.language, 10) == 5){ %>
                  <a href="#" class="langen"><i class="flag flag-nl"></i></a>
                  <% } %>

                </figure>
                <div class="wrapper">
                  <% if (item.datas.title.length > 31 ) { %>
                  <h3><%= item.datas.title.substring(0, 32) %>...</h3>
                  <% } else { %>
                  <h3><%= item.datas.title %></h3>
                  <% } %>
                  <p style="hyphens: auto;"><%= item.datas.shortDesc %></p>
                </div>
                <ul class="bottom">
                  <li>
                    <span class="label label-yellow"><%= item.datas.version %></span>
                  </li>

                  <% if (item.datas.status.toLowerCase() === 'disabled' ) { %>
                  <li class="pull-right">
                    <span class="label bg-grey-disabled"><i class="fas fa-user-secret"></i> Disabled</span>
                  </li>
                  <% } else if (item.datas.status.toLowerCase() === 'private' ) { %>
                  <li class="pull-right">
                    <span class="label bg-gradient-gold"><i class="fas fa-user-secret"></i> Private</span>
                  </li>
                  <% } else if (item.datas.status.toLowerCase() === 'draft' ) { %>
                  <li class="pull-right">
                    <span class="label bg-color-label"><i class="fas fa-user-clock"></i> Draft</span>
                  </li>
                  <% }else if (item.datas.status.toLowerCase() === 'public' && datas.loggedIn === true){ %>
                  <li class="pull-right">
                    <span class="label bg-color-label"><i class="fas fa-users"></i> Public</span>
                  </li>
                  <% } %>
                </ul>
              </div>
            </div>


            <%});
            %>
          </div>
          <%
          });

          } else { 
            %>
          <h1 class="text-center" id="nodocs" style="padding-top: 123px;padding-bottom: 80px;">No documentations to show at the moment :)</h1>
          <% } %>
        </div>

我的问题是，当我显示类别<h4 class="category"><%=ucfirst(cat)%></h4>时，即使没有要显示的项目，它也会显示类别名称。

如果在给定时刻没有要显示的项目，或者即使我只能在函数内显示一次map类别，我正在寻找一种删除类别的方法。

旁注，我正在使用EJSHTML。

感谢大家的帮助。

标签： javascriptejs