Question

所以我遇到了这个问题，我需要将接收的数据显示为显示事件的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"
                    }
           ]
        }

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

更新根据要求，我在这里添加了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)

Answer 1

因为您必须对日期值进行排序，该日期值在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);

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

1 个答案: