如何将以下数组分组并将其输出在EJS中？

Question

这是数组：

const emails = [
  { email: 'w@w', createdAt: 2022-03-31T17:07:36.675+00:00 },
  { email: 'a@a', createdAt: 2022-03-31T17:07:36.675+00:00 },
  { email: 'w@b', createdAt: 2022-04-31T17:07:36.675+00:00 },
  { email: 'w@c', createdAt: 2022-04-31T17:07:36.675+00:00 },
  { email: 'w@d', createdAt: 2022-06-31T17:07:36.675+00:00 },
]

我想在 ejs 中将其格式化为这样：

<div class='card'>
  <h3>Unique Date</h3>
  <div class='emails'>
    <p>All the emails of that unique date</p>
  </div>
</div>

我该怎么做？

Answer 1

在后端，您将需要使用reduce 和map 对现有数组进行分组以执行以下操作。

// Group emails by date
const groupedEmails = emails.reduce((acc, curr) => {
    const date = curr.createdAt.split('T')[0];
    if (!acc[date]) {
        acc[date] = [];
    }
    acc[date].push(curr);
    return acc;
}, {});

// Loop through grouped emails
const groupedEmailsArray = Object.keys(groupedEmails).map(key => {
    return {
        date: key,
        // Sort emails by email in alphabetical order
        emails: groupedEmails[key].sort((a, b) => {
            if (a.email < b.email) {
                return -1;
            }
            if (a.email > b.email) {
                return 1;
            }
            return 0;
        })
    }
});

然后，您需要将groupedEmailArray传递到您的视图并像这样渲染视图

<div class='card'>
  <h3>Unique Date</h3>
  <div class='emails'>
    <p>All the emails of that unique date</p>
    <% for(let group of groupedEmailsArray) { %>
      <p>
        <%= group.date %>
        <% for(let item of group.emails) { %>
            <%= item.email %>
        <% } %>
      </p>

      <% } %>
  </div>
</div>

这应该会产生您正在寻找的结果。