首页 > 解决方案 > 从 API 读取并比较日期以显示某些内容

问题描述

因此,这是关于使用具有日期/时间属性的 API。内容应每 3 小时更改一次,方法是将当前用户日期/时间与 API 的日期/时间进行比较,并在单独的数组中分配过去和即将到来的时间,以显示在页面的其他部分。我设法将过去和即将到来的日期分配给他们各自的数组。如果用户日期/时间等于或在属性中的 3 小时内,我需要比较日期并分配“当前数据”,以在整个三个小时的持续时间内显示它。

this.dataService.getData().subscribe((data:any[])=>{
const now = new Date('2021-02-14 09:00:00');

 for (const item of data) {
   const apiDate = new Date(item.dateTime);

    if(now.getTime() > apiDate.getTime()){
     this.future.push('future dates')
   } else if(now.getTime() < apiDate.getTime()){
     this.past.push('past dates')
   }else if(now.getTime() == apiDate.getTime()){
    //in real time, they'll only be equal for one second
    this.current = 'Show NOW'
   }
 }

这是重新调整的 API/Json 数据的结构

[ {  "number": 10,   "dateTime": "2021-02-14 00:00:00" }, {  "number": 20,   "dateTime": "2021-02-14 03:00:00" }, {  "number": 30,   "dateTime": "2021-02-14 06:00:00" }, {  "number": 40,   "dateTime": "2021-02-14 09:00:00" }, {  "number": 50,   "dateTime": "2021-02-14 12:00:00" }]

一个更好的方法会更好。

谢谢

标签: javascriptangular

解决方案


如果您想显示范围内的时间,那么您可以创建一个带有时间边界的对象:

getTimeInterval = () => {
    const from = new Date();
    const to = new Date(from);
    to.setHours(to.getHours() + 3)
    return { from, to };
}

然后只需检查日期from和边界的两个边界to

this.dataService.getData().subscribe((data:any[])=>{

    const dateRange = this.getTimeInterval();
    
    for (const item of data) {
       const apiDate = new Date(item.dateTime);
    
        if (dateRange.from.getTime() > apiDate.getTime()
           && dateRange.to.getTime() > apiDate.getTime())
        {
            this.future.push('future dates');
        } 
        else if(dateRange.from.getTime() < apiDate.getTime())
        {
            this.past.push('past dates')
        } 
        else if (dateRange.from.getTime() >= apiDate.getTime()
            && dateRange.to.getTime() <= apiDate.getTime())
        {                 
            this.current = 'Show NOW'
        }
 }

推荐阅读