Search code examples
javascriptarraysfor-loopiterationgrouping

How do I group items in an array by date?


Given the following array of objects:

[
{
"notes": "Game was played",
"time": "2017-10-04T20:24:30+00:00",
"sport": "hockey",
"owner": "steve",
"players": "10",
"game_id": 1,
},
{
"notes": "Game was played",
"time": "2017-10-04T12:35:30+00:00",
"sport": "lacrosse",
"owner": "steve",
"players": "6",
"game_id": 2,
},
{
"notes": "Game was played",
"time": "2017-10-14T20:32:30+00:00",
"sport": "hockey",
"owner": "steve",
"players": "4",
"game_id": 3,
},
{
"notes": "Game was played",
"time": "2017-10-04T10:12:30+00:00",
"sport": "hockey",
"owner": "henry",
"players": "10",
"game_id": 4,
},
{
"notes": "Game was played",
"time": "2017-10-14T20:34:30+00:00",
"sport": "soccer",
"owner": "john",
"players": "12",
"game_id": 5,
}
]

I am trying to create a new array, that would create an object with each date(as a key) and any games played on that date listed under games(another key) in the same object.

The new array should look like:

[
{
date:'date string',
games:[array of games played on the date]
}, 
{
date: 'other date',
games:[games under the other date]
}
]...

Here is what I have done:

let t = this.state.data; (data above)
        let list = [];
        for (let i = 0; i < t.length; i++) {
            let dates = t[i].time.slice(0,10);

            if (!list[dates]) {
                list[dates] = [];
            }
            list[dates].push(t[i]);
        }

My version returns a array with the dates as the values, and then inside of those the games are listed, but i am trying to list them in the same object as different keys.

Any help or guidance would be greatly appreciated.


Solution

  • Here's a solution using reduce. Split the time into a date string, and then set a key for each date. If the key exists push it onto the array:

    Update added the array format version

    const data = [
      {notes: 'Game was played', time: '2017-10-04T20:24:30+00:00', sport: 'hockey', owner: 'steve', players: '10', game_id: 1},
      { notes: 'Game was played', time: '2017-10-04T12:35:30+00:00', sport: 'lacrosse', owner: 'steve', players: '6', game_id: 2 },
      { notes: 'Game was played', time: '2017-10-14T20:32:30+00:00', sport: 'hockey', owner: 'steve', players: '4', game_id: 3 },
      { notes: 'Game was played', time: '2017-10-04T10:12:30+00:00', sport: 'hockey', owner: 'henry', players: '10', game_id: 4 },
      { notes: 'Game was played', time: '2017-10-14T20:34:30+00:00', sport: 'soccer', owner: 'john', players: '12', game_id: 5 }
    ];
    
    // this gives an object with dates as keys
    const groups = data.reduce((groups, game) => {
      const date = game.time.split('T')[0];
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push(game);
      return groups;
    }, {});
    
    // Edit: to add it in the array format instead
    const groupArrays = Object.keys(groups).map((date) => {
      return {
        date,
        games: groups[date]
      };
    });
    
    console.log(groupArrays);