Javascript 如何创建具有可用时隙的对象数组

在我的前端应用程序中，我正在获取一个用户的可用任命槽

实际上，我的API提供了如下可用日期：

[“2021-02-20T10:00:00.000Z”， “2021-02-20T11:00:00.000Z”， “2021-02-21T08:00:00.000Z”， “2021-02-21T09:00:00.000Z”]

如你所见，有两个不同的日子，每个日子有两个不同的时间

我想要的是：

[
    {
        date: '2021-02-20T10:00:00.000Z',
        slots: [
            {
                date: '2021-02-20T10:00:00.000Z'
            },
            {
                date: '2021-02-20T11:00:00.000Z'
            }
        ]
    },
    {
        date: '2021-02-21T08:00:00.000Z',
        slots: [
            {
                date: '2021-02-21T08:00:00.000Z'
            },
            {
                date: '2021-02-21T09:00:00.000Z'
            }
        ]
    },
]

因为我想展示两个不同的日期和内部，它们对应的时间。 你知道吗？我使用的是Quasar框架，所以我可以使用来自Quasar甚至Momentjs的Date（）

谢谢

---

为@charlietfl编辑

@Get('/appointment/professionals/:id')
  async getAvailabilityProfessionals(@Req() req: Request, @Param('id') id: string, @Query() params: any) {
    const { from, to } = params
    const professional = await this.professionalsService.findProfessionalById(id)
    const thisDay = new Date(from)
    const lastDay = new Date(to)
    const data = professional.availability.filter(date => date >= thisDay && date <= lastDay)

    const grouped = data.reduce((a, c) => {
      const day = c.toString().slice(0, 10)
      a[day] = a[day] || { date: c, slots: [] }
      a[day].slots.push({ date: c })
      return a
    }, {})
    return Object.values(grouped)
  }

@Get（'/appointment/professionals/：id'）
异步getAvailabilityProfessionals（@Req（）Req:Request，@Param（'id'）id:string，@Query（）params:any）{
常量{from，to}=params
const professional=等待此.professionalsService.findProfessionalById（id）
const thisDay=新日期（从）
const lastDay=新日期（到）
const data=professional.availability.filter（日期=>date>=thisDay&&date）{
const day=c.toString（）.slice（0,10）
a[天]=a[天]|{日期：c，插槽：[]}
a[day].slots.push（{date:c}）
归还
}, {})
返回对象值（分组）
}

这似乎是一种直截了当的格式，因此我使用了拆分组合，以便能够以您想要的格式生成新字符串：D

let apiData=[“2021-02-20T10:00:00.000Z”、“2021-02-20T11:00:00.000Z”、“2021-02-21T08:00:00.000Z”、“2021-02-21T09:00:00.000Z”]
功能转换（arr）{
返回arr.map（a=>{
var toSplitBy=a.split（'T'）[1]。split（'：'）[0]//返回介于T和：
var splitText=a.split（toSplitBy）//为插槽数组中的每个日期部分进行拆分，以便在再次组合时具有正确的值
return（{//要返回的arr的每个索引的映射对象
日期：a，
插槽：[
{date:splitText[0]+（toSplitBy）+splitText[1]}，
{日期：拆分文本[0]+（toSplitBy*1+1）+拆分文本[1]}
]
})
})
}
var convertedData=转换（apiData）
log（console.log）（convertedData）

这似乎是一种简单的格式，因此我使用了拆分组合，以便能够以您想要的格式生成新字符串：D

let apiData=[“2021-02-20T10:00:00.000Z”、“2021-02-20T11:00:00.000Z”、“2021-02-21T08:00:00.000Z”、“2021-02-21T09:00:00.000Z”]
功能转换（arr）{
返回arr.map（a=>{
var toSplitBy=a.split（'T'）[1]。split（'：'）[0]//返回介于T和：
var splitText=a.split（toSplitBy）//为插槽数组中的每个日期部分进行拆分，以便在再次组合时具有正确的值
return（{//要返回的arr的每个索引的映射对象
日期：a，
插槽：[
{date:splitText[0]+（toSplitBy）+splitText[1]}，
{日期：拆分文本[0]+（toSplitBy*1+1）+拆分文本[1]}
]
})
})
}
var convertedData=转换（apiData）
console.log（convertedData）

您需要一个“groupBy”操作，其中使用公共值（唯一日期）作为对象键，并根据需要更新该对象或创建一个新对象

然后，一旦分组完成，就可以得到分组对象的值

const group=data.reduce（（a，c）=>{
常数日=c.切片（0,10）
a[天]=a[天]|{日期：c，插槽：[]}
a[day].slots.push（{date:c}）
归还
},{})
const res=对象值（分组）
console.log（res）

常数数据=[“2021-02-20T10:00:00.000Z”，“2021-02-20T11:00:00.000Z”，“2021-02-21T08:00:00.000Z”，“2021-02-21T09:00:00.000Z”]

您需要一个“groupBy”操作，使用公共值（唯一日期）作为对象键，并根据需要更新该对象或创建一个新对象

然后，一旦分组完成，就可以得到分组对象的值

const group=data.reduce（（a，c）=>{
常数日=c.切片（0,10）
a[天]=a[天]|{日期：c，插槽：[]}
a[day].slots.push（{date:c}）
归还
},{})
const res=对象值（分组）
console.log（res）

常数数据=[“2021-02-20T10:00:00.000Z”，“2021-02-20T11:00:00.000Z”，“2021-02-21T08:00:00.000Z”，“2021-02-21T09:00:00.000Z”]

简单地说，这是一个映射练习，有人可能会带来一个regex示例，以较少的代码行生成该格式的字符串（如返回部分中的数据是每个字符串的某个regex版本）。简单地说，这是一个映射练习，有人可能会带来一个regex示例，用更少的代码行生成该格式的字符串（就像返回部分中的数据是每个字符串的某个regex版本一样）。谢谢，它的工作方式与预期的一样！我想知道如何编辑它，因为我需要相同的东西，但是：我需要API每天返回一次，即使它们没有插槽。实际上，在参数中给出的GET调用有两个日期（from和to），API返回每个可用的日期，就像我的第一篇文章一样。但我最终需要的是，API每天都返回，即使它们没有插槽。thanksI编辑了主要主题，以显示我的实际工作代码，如果您有时间查看，谢谢，它的工作方式与预期的一样！我想知道如何编辑它，因为我需要相同的东西，但是：我需要API每天返回一次，即使它们没有插槽。实际上，在参数中给出的GET调用有两个日期（from和to），API返回每个可用的日期，就像我的第一篇文章一样。但我最终需要的是，API每天都返回，即使它们没有插槽。thanksI编辑了主要主题以显示我的实际工作代码，如果您有时间查看的话