如何在 Pug 中对当前对象进行分组后访问它们的索引

Question

我正在尝试对一组对象进行排序，然后按 dueDate 对它们进行分组，然后遍历每个元素。我正在 Pug.

做所有这些事情

数据

[
  {
    "dueDate": "2021-03-10T18:30:00.000Z",
    "done": false,
    "_id": "603f62d0ee88543aa8c4ba1c",
    "task": "task 1-1",
    "dueTime": "05:49 PM"
  },
  {
    "dueDate": "2021-03-10T18:30:00.000Z",
    "done": false,
    "_id": "603d39cdbbf49752982f297d",
    "task": "task1",
    "dueTime": "12:30 AM"
  },
  {
    "dueDate": "2021-03-11T18:30:00.000Z",
    "done": false,
    "_id": "603d3f3d8295dc2b68bc1da2",
    "task": "task4",
    "dueTime": "05:33 AM"
  },
  {
    "dueDate": "2021-03-17T18:30:00.000Z",
    "done": false,
    "_id": "603f6e29ec4e9d3b88710be7",
    "task": "task 2-2",
    "dueTime": "04:38 PM"
  },
  {
    "dueDate": "2021-03-17T18:30:00.000Z",
    "done": false,
    "_id": "603d3f238295dc2b68bc1da0",
    "task": "task2",
    "dueTime": "12:53 AM"
  },
  {
    "dueDate": "2021-03-19T18:30:00.000Z",
    "done": false,
    "_id": "603d4836ef44f83c70857c82",
    "task": "task5",
    "dueTime": "01:31 AM"
  }
]

我用它按日期升序对它们进行排序，然后对它们进行分组

- const sortByDate = (user.todos).sort((a, b) => (a.dueDate > b.dueDate ? 1 : -1))
- const groupByDate = sortByDate.reduce((item, key) => { item[key.dueDate] = [...(item[key.dueDate] || []), key]; return item;}, {});

对它们进行排序和分组后，我得到了这个

{
  "Thu Mar 11 2021 00:00:00 GMT+0530 (India Standard Time)": [
    {
      "dueDate": "2021-03-10T18:30:00.000Z",
      "done": false,
      "_id": "603f62d0ee88543aa8c4ba1c",
      "task": "task 1-1",
      "dueTime": "05:49 PM"
    },
    {
      "dueDate": "2021-03-10T18:30:00.000Z",
      "done": false,
      "_id": "603d39cdbbf49752982f297d",
      "task": "task1",
      "dueTime": "12:30 AM"
    }
  ],
  "Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time)": [
    {
      "dueDate": "2021-03-11T18:30:00.000Z",
      "done": false,
      "_id": "603d3f3d8295dc2b68bc1da2",
      "task": "task4",
      "dueTime": "05:33 AM"
    }
  ],
  "Thu Mar 18 2021 00:00:00 GMT+0530 (India Standard Time)": [
    {
      "dueDate": "2021-03-17T18:30:00.000Z",
      "done": false,
      "_id": "603f6e29ec4e9d3b88710be7",
      "task": "task 2-2",
      "dueTime": "04:38 PM"
    },
    {
      "dueDate": "2021-03-17T18:30:00.000Z",
      "done": false,
      "_id": "603d3f238295dc2b68bc1da0",
      "task": "task2",
      "dueTime": "12:53 AM"
    }
  ],
  "Sat Mar 20 2021 00:00:00 GMT+0530 (India Standard Time)": [
    {
      "dueDate": "2021-03-19T18:30:00.000Z",
      "done": false,
      "_id": "603d4836ef44f83c70857c82",
      "task": "task5",
      "dueTime": "01:31 AM"
    }
  ]
}

现在我正在使用 each 循环每个元素

each group,i in groupByDate 
        p= `${group.length} - ${group[0].dueDate} - Index: ${i}`

但不是 return 元素的索引，而是 return 元素的索引 dueDate。

2 - Thu Mar 11 2021 00:00:00 GMT+0530 (India Standard Time) - Index: Thu Mar 11 2021 00:00:00 GMT+0530 (India Standard Time)

1 - Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time) - Index: Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time)

2 - Thu Mar 18 2021 00:00:00 GMT+0530 (India Standard Time) - Index: Thu Mar 18 2021 00:00:00 GMT+0530 (India Standard Time)

1 - Sat Mar 20 2021 00:00:00 GMT+0530 (India Standard Time) - Index: Sat Mar 20 2021 00:00:00 GMT+0530 (India Standard Time)

我想要它 return

2 - Thu Mar 11 2021 00:00:00 GMT+0530 (India Standard Time) - Index: 1
1 - Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time) - Index: 2
2 - Thu Mar 18 2021 00:00:00 GMT+0530 (India Standard Time) - Index: 3
1 - Sat Mar 20 2021 00:00:00 GMT+0530 (India Standard Time) - Index: 4

那么，如何访问我正在循环的当前对象的索引？

Answer 1

您正在迭代一个对象。所以那个对象的 index 是属性键。如果你想要一个计数索引，那么它应该是一个数组。

带辅助变量的解决方案 i:

- var i = 0;
each group in groupByDate 
    p= `${group.length} - ${group[0].dueDate} - Index: ${++i}`

Object.keys 的解决方案：

each group, i in groupByDate 
    p= `${group.length} - ${group[0].dueDate} - Index: ${Object.keys(groupByDate).indexOf(i) + 1}`

如何在 Pug 中对当前对象进行分组后访问它们的索引

How to access the index of current object after grouping them in Pug

javascript

frontend

pug