I am currently working on organizing a list of events by day and then further grouping them by time. I have successfully achieved the first level of categorization but I am facing challenges with implementing the second level.
Ultimately, I aim to display the events as follows:
Friday
8:00 - Event 1, Event 2, etc…
9:00 - Event 1, Event 2, etc…
…Saturday
8:00 - Event 1, Event 2, etc…
9:00 - Event 1, Event 2, etc…
…
The code snippet below illustrates my progress so far in creating the day-level groupings. As I am relatively new to this, I would appreciate any suggestions for a more efficient approach.
You can view a CodePen version of the current implementation, which only groups the events by day and not by time.
I have attempted various methods. While I understand that I may need to implement a similar logic for time grouping as I did for date, I am unsure how to handle non-existing arrays in the process of creation, looping, and displaying.
<div id="vue">
<div v-for="events, day in groupedDays" class="day">
<h2>{{ day == today ? 'Today' : day }}</h2>
<div v-for="event, time in events">
{{ event.date.toLocaleTimeString() }} - {{ event.title }}
</div>
</div>
</div>
function groupBy(array, fn) {
let result = {};
array.forEach(item => {
let key = fn(item);
if (!result[key]) {
result[key] = [];
}
result[key].push(item);
});
return result;
}
let conferenceDays = [];
for (let [key, session] of Object.entries(sessions)) {
// console.log(session.Start);
conferenceDays.push({
date: new Date(session.Start),
title: session.Title
});
}
new Vue({
el: "#vue",
data() {
return {
conferenceDays,
today: new Date().toDateString()
};
},
computed: {
groupedDays() {
return groupBy(this.conferenceDays, day => day.date.toDateString());
}
}
});
In anticipation of someone referring to this question as a duplicate of a vaguely related query, I want to clarify that despite extensive research, I have not come across any inquiries addressing two levels of groupings. I remain open to alternative solutions if my current approach is suboptimal.