根据胡子模板内的属性值对列表中的项目进行分组

问题描述 投票:0回答:1

假设我有一个“预订”列表:

[
  {
    Date: { S: '2024-04-10' },
    BookingID: { N: '3' },
    Room: { S: 'Pod1' }
  },
  {
    Date: { S: '2024-04-10' },
    BookingID: { N: '5' },
    Room: { S: 'Pod2' }
  },
  {
    Date: { S: '2024-05-13' },
    BookingID: { N: '2' },
    Room: { S: 'Pod3' }
  }
]

我如何格式化我的胡子文件以根据日期将预订分组在一起?

我必须使用脚本吗?我可以使用以下方法在我的胡子文件上显示列表:

{{#bookings}}
  <p>Date: {{date}}
  <p>ID: {{id}}
  <p>Room: {{room}}
{{/bookings}}

但我不确定从哪里开始能够按日期将它们分组在一起。

如果这不是最好的措辞,我很抱歉,我仍然习惯在这里写出像样的问题! TIA

javascript html mustache
1个回答
0
投票

您可以使用JS函数对预订进行分组,并将分组后的预订传递到mustache文件。

const bookings = [
    {
        Date: { S: "2024-04-10" },
        BookingID: { N: "3" },
        Room: { S: "Pod1" }
    },
    {
        Date: { S: "2024-04-10" },
        BookingID: { N: "5" },
        Room: { S: "Pod2" }
    },
    {
        Date: { S: "2024-05-13" },
        BookingID: { N: "2" },
        Room: { S: "Pod3" }
    }
];

// Group bookings by date
const groupedBookings = {};
bookings.forEach(function (booking) {
    const date = booking.Date.S;
    if (!groupedBookings[date]) {
        groupedBookings[date] = [];
    }
    groupedBookings[date].push(booking);
});

console.log(groupedBookings);

在你的胡子文件中,你可以让它看起来像这样:

{{#groupedBookings}}
  <h2>{{date}}</h2>
  {{#bookings}}
    <p>Date: {{Date.S}}</p>
    <p>ID: {{BookingID.N}}</p>
    <p>Room: {{Room.S}}</p>
  {{/bookings}}
{{/groupedBookings}}
© www.soinside.com 2019 - 2024. All rights reserved.