在Javascript中按日期对未知数量的对象进行排序

所以我遇到了这个问题，我需要将接收的数据显示为JSON，它显示事件。我想按时间对活动进行排序，因为如果场地空闲，人们可以在预订活动之前预订活动。我的另一个问题是，JSON中的对象数量总是未知的，因为人们总是可以向其中添加更多的对象。 下面是我的代码，它应该如何显示

          {
            "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"
                    }
           ]
        }

事件数组下可能有更多对象。现在我想按开始时间对这些对象进行排序。所以我可以按这样的顺序显示它们。 请注意，此处列出了更多事件对象

更新 根据要求，我在这里添加了main.js代码

$.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)

$.getJSON（某种url，呈现）
函数渲染（数据）{
console.log（data.events.length）
让filteredDate=data.events.filter（（项）=>{
让endTime=新日期（item.end）；
如果（日期现在（）{
让startTime=新日期（项目2.开始）；
if（Date.now（）>startTime）{
返回项目2；
}
});   
让filteredDate3=filteredDate.filter（（项2）=>{
让startTime=新日期（项目2.开始）；
if（Date.now（）0&&filteredDate2.length==0）{
bodybackground.classList.add（'body_free'）；
positionbackground.classList.add（'right_booked'）；
free\u busy.innerHTML=`
free
`
对于（设x=0；x 0&&filteredDate2.length>0）{
bodybackground.classList.add（'body_busy'）；
positionbackground.classList.add（'right_inProgress'）；
free\u busy.innerHTML=`
busy
`
document.getElementById（'event_output'）.innerHTML=
`
正在举行的会议：

${Filteredata2[0]。开始}-${Filteredata2[0]。结束}
${FilteredData2[0]。摘要}
${FilteredData2[0]。组织者}
${filteredDate2[0]。满足\u url}

其他预订：
`+
filteredDate3.map（某物）.join（“”）
函数（eventos）{
返回`
预约会议：

${eventos.start}-${eventos.end}
${eventos.summary}
${eventos.organizer}
${eventos.meet_url}

`
}
}
//在此，它将显示正在进行的会议+已预订的其他会议
否则{
bodybackground.classList.add（'body_free'）；
positionbackground.classList.add（'right_free'）；
free\u busy.innerHTML=`
free
`
document.getElementById（'event_output'）。innerHTML=`
没有预订任何事件`
}
//在这里，它显示一个免费房间，没有预订会议
} 
/*显示当前日期*/
var date=document.getElementById（'date'）
var currentTime=新日期（）
var month=currentTime.getMonth（）+1
var day=currentTime.getDate（）
var year=currentTime.getFullYear（）
var hours=currentTime.getHours（）
var minutes=currentTime.getMinutes（）
如果（分钟<10）{
分钟数=“0”+分钟数
}
date.innerHTML=（小时+'：'+分钟+“”+月+“/”+日+“/”+年）

因为您必须对JSON中表示为字符串的日期值进行排序。因此，您需要使用

new date（）

转换日期值，然后获取可用于对数组中的对象进行排序的总时间值。类似于以下内容：

var数据={
“事件”：[
{
“开始”：“2018-05-29T09:15:00+02:00”，
“结束”：“2018-05-29T10:00:00+02:00”，
“总结”：“早餐行动”，
“组织者”：organizers1@email.si",
“满足url”：https://meet.google.com/exampleLink"
},
{
“开始”：“2018-04-29T09:15:00+02:00”，
“结束”：“2018-05-29T10:00:00+02:00”，
“总结”：“早餐行动”，
“组织者”：organizers2@email.si",
“满足url”：https://meet.google.com/exampleLink"
},
{
“开始”：“2018-03-29T09:15:00+02:00”，
“结束”：“2018-05-29T10:00:00+02:00”，
“总结”：“早餐行动”，
“组织者”：organizers3@email.si",
“满足url”：https://meet.google.com/exampleLink"
}
]
};
数据.事件.排序（函数（a，b）{
返回新日期（a.start）.getTime（）-新日期（b.start）.getTime（）
});
console.log（data）；

请分享您的心血您的意思是什么。请检查：我的意思是我可以看到要求，但是，我看不到您迄今为止尝试实现的目标。可能的重复将按日期对所有对象进行排序？@DavidB yes.by

start

date。