javascript - 在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)
解决方案
由于您必须对在 JSON 中表示为字符串的日期值进行排序。因此,您需要使用它进行转换,new Date()
然后获取可用于对数组中的对象进行排序的总时间值。像这样的东西:
var data = {
"events":[
{
"start": "2018-05-29T09:15:00+02:00",
"end": "2018-05-29T10:00:00+02:00",
"summary": "BreakfastOps",
"organizer": "organizers1@email.si",
"meet_url": "https://meet.google.com/exampleLink"
},
{
"start": "2018-04-29T09:15:00+02:00",
"end": "2018-05-29T10:00:00+02:00",
"summary": "BreakfastOps",
"organizer": "organizers2@email.si",
"meet_url": "https://meet.google.com/exampleLink"
},
{
"start": "2018-03-29T09:15:00+02:00",
"end": "2018-05-29T10:00:00+02:00",
"summary": "BreakfastOps",
"organizer": "organizers3@email.si",
"meet_url": "https://meet.google.com/exampleLink"
}
]
};
data.events.sort(function(a, b){
return new Date(a.start).getTime() - new Date(b.start).getTime()
});
console.log(data);
推荐阅读
- oracle - 插入查询时 SQL 命令未正确结束
- vbscript - 我可以调整 Msgbox 的大小吗?和上面的图像?
- javascript - 如何清晰快速地切换这个json数据
- database - 没有连接到 xcode 就无法在真实设备中看到数据库表
- git - 主分支上的 Git 标记指向合并提交——开发分支不可用
- c++ - getline(ifstream, line) 的返回字符串为空
- html - 如何将溢出的列表项修复到其他列
- javascript - Mongoose save() 和 find() 没有运行
- swift - 排除 Swift 包中的文件
- python - 值错误:标签的长度必须为“x”python 3