How can I map and Object with Arrays as values?

Question

Given the following array of objects with dates in UTC:

const Arr = [
{
"name": "Person 1",
"date": "2021-02-28T14:00:00.000+0000"
},
{
"name": "Person 2",
"date": "2021-02-28T19:15:00.000+0000"
},
{
"name": "Person 3",
"date": "2021-04-04T18:30:00.000+0000"
},
{
"name": "Person 4",
"date": "2021-05-11T19:00:00.000+0000"
},
{
"name": "Person 5",
"date": "2021-05-12T18:45:00.000+0000"
},
{
"name": "Person 6",
"date": "2021-05-11T19:00:00.000+0000"
},
{
"name": "Person 7",
"date": "2021-05-23T15:00:00.000+0000"
}
];

I grouped the items by date using reduce as described in the below code:

const eventDate = {};
Arr.reduce((groupByDate, event) => {
 const date = event.date.split('T')[0];

 if (!groupByDate[date]) {
  groupByDate[date] = [];
 }

 groupByDate[date].push(event);
 return groupByDate;
}, {});

Getting an object grouped by date (as key) and an array of objects (as values):

{
'2021-02-28': [
  { name: 'Person 1', date: '2021-02-28T14:00:00.000+0000' },
  { name: 'Person 2', date: '2021-02-28T19:15:00.000+0000' }
],
'2021-04-04': [ { name: 'Person 3', date: '2021-04-04T18:30:00.000+0000' } ],
'2021-05-11': [
  { name: 'Person 4', date: '2021-05-11T19:00:00.000+0000' },
  { name: 'Person 6', date: '2021-05-11T19:00:00.000+0000' }
],
'2021-05-12': [ { name: 'Person 5', date: '2021-05-12T18:45:00.000+0000' } ],
'2021-05-23': [ { name: 'Person 7', date: '2021-05-23T15:00:00.000+0000' } ]
}

So my doubt here is how can I loop through that new object in order to get something like this? (date in UTC will be formatted and get only the time)

2021-02-28:
name: Person 1 time: 14:00
name: Person 2 time: 19:15

2021-04-04:
name: Person 3 time: 18:30

2021-05-11:
name: Person 4 time: 19:00
name: Person 6 time: 19:00

2021-05-12:
name: Person 5 time: 18:45

2021-05-23:
name: Person 7 time: 15:00

Thanks in advance!

Do you want the output as `console.log` or as specific data structure? — Guerric P, Jun 25 '21 at 17:25
Hi @GuerricP, the data structure if is not inconvenient, please. — IberaSoft, Jun 25 '21 at 17:29
Just mutate the date in the reduce instead of pushing the existing event. `groupByDate[date].push({name: event.name, time: event.date.substr(11, 5)});` — pilchard, Jun 25 '21 at 17:31
As @GuerricP said what data structure? object? array? string? — Snirka, Jun 25 '21 at 17:33
Thanks, @pilchard that format the time but I'm getting problems mapping that Object. Not sure how to loop through that values (Array) — IberaSoft, Jun 25 '21 at 17:59
It's still unclear what you mean by 'map' it. What is your expected output? If it's just a console.log then Aaron Beall's answer works below. — pilchard, Jun 25 '21 at 18:02
so... you're asking how to convert an object of arrays into html/text? — Kevin B, Jun 25 '21 at 18:05
Hi @KevinB and plichard with just console.log() is fine. As you mention Aaron Beall answer works perfectly!. Thank you all for your help! — IberaSoft, Jun 25 '21 at 18:16

score 0 · Answer 1 · answered Jun 25 '21 at 17:52

0

I would use Object.entries() or Object.keys() on the top level object to loop over it (for example using forEach() or any other looping method):

Object.entries(data).forEach(([key, items]) => {
  console.log(key);
  items.forEach(item => {
    console.log("name:", item.name, "date:", item.date)
  })
})

Playround

answered Jun 25 '21 at 17:52

Aaron Beall

49,769
26
85
103

That solution was exactly what I need it. Thank you very much, @Aaron Beall ! – IberaSoft Jun 25 '21 at 18:15

score 0 · Answer 2 · answered Jun 25 '21 at 17:54

Perhaps something like this?

const obj = {
  '2021-02-28': [
    { name: 'Person 1', date: '2021-02-28T14:00:00.000+0000' },
    { name: 'Person 2', date: '2021-02-28T19:15:00.000+0000' }
  ],
  '2021-04-04': [{ name: 'Person 3', date: '2021-04-04T18:30:00.000+0000' }],
  '2021-05-11': [
    { name: 'Person 4', date: '2021-05-11T19:00:00.000+0000' },
    { name: 'Person 6', date: '2021-05-11T19:00:00.000+0000' }
  ],
  '2021-05-12': [{ name: 'Person 5', date: '2021-05-12T18:45:00.000+0000' }],
  '2021-05-23': [{ name: 'Person 7', date: '2021-05-23T15:00:00.000+0000' }]
}

const newObj = {}
const newSubObj = {}

for (const [key, value] of Object.entries(obj)) {
  newObj[key] = []
  newSubObj[key] = []

  for (const item of value) {
    const date = new Date(item.date)
    const subDate = item.date.substr(11, 5)

    const hours = date.getUTCHours()
    const minutes = date.getUTCMinutes()

    newObj[key].push({ name: item.name, time: `${hours}:${minutes}` })
    newSubObj[key].push({ name: item.name, time: subDate })
  }
}

console.log(newObj, newSubObj)

Snirka · Answer 3 · 2021-06-25T18:16:37.023

Assuming you want to console.log() the result this is how I will do it:

const obj = {
    '2021-02-28': [
      { name: 'Person 1', date: '2021-02-28T08:00:00.000+0000' },
      { name: 'Person 2', date: '2021-02-28T19:15:00.000+0000' }
    ],
    '2021-04-04': [ { name: 'Person 3', date: '2021-04-04T18:30:00.000+0000' } ],
    '2021-05-11': [
      { name: 'Person 4', date: '2021-05-11T19:00:00.000+0000' },
      { name: 'Person 6', date: '2021-05-11T19:00:00.000+0000' }
    ],
    '2021-05-12': [ { name: 'Person 5', date: '2021-05-12T18:45:00.000+0000' } ],
    '2021-05-23': [ { name: 'Person 7', date: '2021-05-23T15:00:00.000+0000' } ]
}

const printObj = (obj) => {
    Object.keys(obj).forEach(key => {
        console.log(`${key}:`);
        obj[key].forEach(val => {
            const currentDate = new Date(val.date);
            const currentDateHours = (currentDate.getUTCHours() < 10 ? '0' : '') + currentDate.getUTCHours();
            const currentDateMinutes = (currentDate.getUTCMinutes() < 10 ? '0' : '') + currentDate.getUTCMinutes();
            console.log(`name: ${val.name} time: ${currentDateHours}:${currentDateMinutes}`);
        })
    });
}

printObj(obj);

Note: getUTCHours() and getUTCMinutes() will not show two digit number in case of a leading 0, I took it into consideration.

How can I map and Object with Arrays as values?

3 Answers3