Javascript缩减，如果没有要显示的元素，则不显示类别

Question

我有一个来自数据库的数据，我根据类别字段对项目进行过滤和分组，然后显示项目及其相应的类别，这是我得到的代码。我正在使用EJS作为模板引擎：

<% 

var catDocs =   docs.reduce((acc, x) => {
    acc[x.datas.category] = [...(acc[x.datas.category] || []), x];
    return acc;
}, {});

Object.entries(catDocs).map(function ([cat, items]){ %>
  <h4 class="category"><%=ucfirst(cat)%></h4>
<div class="row">
  <%
    items.filter(function(item) {
      if (!datas.loggedIn && item.datas.status !== 'published') {
return false; // skip
      }
      return true;
    }).map(function (item) {%> 


    <h5><%= item.datas.status %></h5>

    <% }); 

}); %>

这是reduce之前的原始数据：

现在，我被困在一个错误中，某些类别没有任何已发布的项目，并且标题仍然显示，因为在使用filter函数之前我正在显示标题，在此我会跳过所有未发布的项目在用户未登录时发布。

如果没有要显示的项目（换句话说，如果if there's not any pushblished item and there's is not logged in don't display the corresponding title，则有人可以帮助隐藏标题）

非常感谢大家的帮助。

最好的问候

Answer 1

因此，您只想过滤具有真实loggedIn属性或状态“已发布”的条目？从此开始。

catDocs =  docs
   .filter(({ datas }) => datas.loggedIn || datas.status === 'published')
   .reduce((acc, x) => { // the rest here

顺便说一句，这不是一个很好的reducer函数，它会改变累加器，而不是仅 返回一个新值。

Answer 2

最好将数据准备为结构，以使视图更易于呈现。

例如首先将datas.docs映射并过滤到只有category => items.length> 0

的项目对的新数组

也可以将！datas.loggedIn检查移到过滤器之外，因为如果用户未登录，则您不希望呈现任何内容。在示例中，if子句之前是正常的。