I'm facing an issue where I need to showcase JSON data containing events but want them sorted by time. The challenge is that the number of objects in the JSON can vary as users can keep adding more. Below is my code snippet demonstrating how the display should look like.
{
"events":[{
"start": "2018-05-29T09:15:00+02:00",
"end": "2018-05-29T10:00:00+02:00",
"summary": "BreakfastOps",
"organizer": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf3eefbfdf2f5e6f9eeefdcf9f1fdf5f0b2eff5">[email protected]</a>",
"meet_url": "https://meet.google.com/exampleLink"
}
]
}
The events array could contain more objects, and I aim to sort them based on their start times for a well-organized display. Here's an image of unsorted events. Do note that there are additional event objects not shown here.
Update: Per request, I've included the code snippet from my main.js file.
$.getJSON(some kind of url., render)
function render(data){
console.log(data.events.length)
let filteredDate = data.events.filter((item) =>{
let endTime = new Date(item.end);
if(Date.now()<endTime){
return item;
}
});
let filteredDate2 = filteredDate.filter((item2)=>{
let startTime = new Date(item2.start);
if(Date.now()>startTime){
return item2;
}
});
//and so on...
}
/* Displays current date*/
var date = document.getElementById('date')
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
date.innerHTML = (hours + ':'+minutes+" "+ month + "/" + day + "/" + year)