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

Question

I am trying to sort an array of objects, then grouping them by dueDate and then looping through each element. I am doing all these things in Pug.

Data

[
  {
    "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"
  }
]

I used this to sort them by ascending order of date and then grouping them

- 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;}, {});

After sorting and grouping them I got this

{
  "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"
    }
  ]
}

Now I am using each for looping each element

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

But instead of returning the index of the element, it is returning the 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)

I want it to 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

So, How can access the index of the current object on which I am looping?

Answer 1

You are iterating over an object. So the index of that object is the property key. If you want a counting index, then it should be an array.

Solution with helper variable i:

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

Solution with Object.keys:

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