So I am having this problem where I need to display data receiving as JSON which shows events. I would like to sort the events by time since people can book the event before the booked event if space is free. And my other problem is that the number of objects in the JSON is always unknown since people can always add more objects to it. Provided below is my code of how it should display.
{
"events":[{
"start": "2018-05-29T09:15:00+02:00",
"end": "2018-05-29T10:00:00+02:00",
"summary": "BreakfastOps",
"organizer": "organizers@email.si",
"meet_url": "https://meet.google.com/exampleLink"
}
]
}
There could be more objects under the events array. Now I want to sort these objects by start time. So I can display them in order like that. Picture of unorganized events. Note that there are more objects of events listed here.
Update As requested I added my main.js code here.
$.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;
}
});
let filteredDate3 = filteredDate.filter((item2)=>{
let startTime = new Date(item2.start);
if(Date.now()<startTime){
return item2;
}
});
console.log(filteredDate.length)
console.log(filteredDate2.length)
let bodybackground = document.getElementById('body');
let positionbackground = document.getElementById('right');
let free_busy= document.getElementById('free_busy');
//To this point, I have removed the outdated events and put not yet finished events in a new array
if (filteredDate.length>0 && filteredDate2.length===0 ){
bodybackground.classList.add('body_free');
positionbackground.classList.add('right_booked');
free_busy.innerHTML= `<p class=free_busy>FREE</p>`
for(let x=0;x<filteredDate.length;x++){
document.getElementById('event_output').innerHTML=
`${filteredDate.map(eventMap).join("")}`
function eventMap(event){
return `<div class="event">
<h1> Booked meeting:</h1>
<ul>
<li>${event.start} - ${event.end}</li>
<li>${event.summary}</li>
<li>${event.organizer}</li>
<li>${event.meet_url}</li>
</ul>
</div>`
}
}
//document.getElementById('duration').innerHTML = 'FOR ' + DATE.end - DATE.start + ' MINUTES'; this is the next idea i am going to add.
}
//Here it displays free but will show booked meetings.
else if (filteredDate.length > 0 && filteredDate2.length > 0){
bodybackground.classList.add('body_busy');
positionbackground.classList.add('right_inProgress');
free_busy.innerHTML = `<p class=free_busy>BUSY</p>`
document.getElementById('event_output').innerHTML=
`
<div class="event">
<h1 align=center> Meeting in progress:</h1>
<ul>
<li>${filteredDate2[0].start} - ${filteredDate2[0].end}</li>
<li>${filteredDate2[0].summary}</li>
<li>${filteredDate2[0].organizer}</li>
<li>${filteredDate2[0].meet_url}</li>
</ul>
</div><hr color= '#C02D2D' size="20px"><h1 align=center>Other Bookings:</h1>
`+
filteredDate3.map(something).join("")
function something (eventos){
return `<div class="event">
<h1> Booked meeting:</h1>
<ul>
<li>${eventos.start} - ${eventos.end}</li>
<li>${eventos.summary}</li>
<li>${eventos.organizer}</li>
<li>${eventos.meet_url}</li>
</ul>
</div>`
}
}
//Here it will display the Meeting in progress + other meetings booked
else{
bodybackground.classList.add('body_free');
positionbackground.classList.add('right_free');
free_busy.innerHTML= `<p class=free_busy>FREE</p>`
document.getElementById('event_output').innerHTML = `<p class='noevent'>No events booked<p>`
}
//Here it displays a free room and no meetings booked
}
/* 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)
