Grouping items in a list based on attribute values inside a mustache template

Question

Say I had a list of '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' }
  }
]

How would I format my mustache file to group bookings together depending on their date for example?

Would I have to use a script? I can display the list on my mustache file using:

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

But I'm not sure where I'd even start to be able to group them together by date.

Apologies if this wasn't worded the best, I'm still getting used to writing decent questions here! TIA

Answer 1

You can use a JS function to group the bookings and pass the grouped bookings to the mustache file.

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
let groupedBookings = {};
bookings.forEach(function (booking) {
    const date = booking.Date.S;
    if (!groupedBookings[date]) {
        groupedBookings[date] = [];
    }
    groupedBookings[date].push(booking);
});

groupedBookings = Object.entries(groupedBookings).map(([date, bookings]) => ({
    date,
    bookings
}));

console.log(groupedBookings);

In your mustache file you can make it look something like this:

{{#groupedBookings}}
    <h2>{{date}}</h2>

    {{#bookings}}
        <p>Date: {{Date}}</p>
        <p>ID: {{BookingID}}</p>
        <p>Room: {{Room}}</p>
    {{/bookings}}
{{/groupedBookings}}