Javascript How to split up events from JSON into months

Question

I want to display a list of events based on the Month they take place. Right now its an array with JSON where each event is included as an object but since I want to display it like this:

January
- event blabla  10/01/17
- event thisandthat  17/01/17

February
- event something 05/02/17
- event another something 13/02/17

...etc etc

I cannot use the JSON like I want to. So is there a way how I can "change" the JSON to my needs?

Right now I receive my JSON like this:

[{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-01-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-01-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-02-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-03-20" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-05-05" 
}]

My desired result should look something like this:

[{
    "January": [{
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-01-10" 
        },
        {
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-01-17"
        }
    ]
},
{
    "February": [{
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-02-10"
        },
        {
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-02-17"
        }
    ]
},
{
    "March": [{
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-03-10"
        },
        {
            "event_name": "blabla",
            "event_location" : "somewhere",
            "event_date": "2017-03-17"
        }
    ]
  }
]

How can I achieve this (if its possible)?

So if I understand right, you wish to *group objects in array using a property*. Please search this formatted text on google and you will receive your solution. — Rajesh, Sep 28 '17 at 11:31
@Steve sorry if my above comment was rude. But a user with your rep should know the importance of sharing effort. What we have here is a requirement and not a problem statement. Also to add on to my previous comment, this will help you: https://stackoverflow.com/questions/31688459/group-array-items-using-object — Rajesh, Sep 28 '17 at 11:34

score 1 · Accepted Answer · answered Sep 28 '17 at 11:41

You can use Array#reduce to achieve this:

var data = [{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-01-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-10-17" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-02-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-03-20" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-05-05" 
}];

var monthName = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var groups = data.reduce(function(acc, o) {
  var month = monthName[new Date(o.event_date).getMonth()];
  acc[month] = acc[month] || [];
  acc[month].push(o);
  return acc;
}, {});

var result = Object.keys(groups).sort(function(a, b) {
  return monthName.indexOf(a) - monthName.indexOf(b);
}).map(function(key) {
  var o = {};
  o[key] = groups[key];
  return o;
});

console.log(result);

This is great! Thanks alot! :-) – ST80 Sep 28 '17 at 13:18 — ST80, Sep 28 '17 at 13:18

score 0 · Answer 2 · answered Sep 28 '17 at 11:41

You can loop through them, and put a copy in a new object which is by months:

let unorganized = [{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-01-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-01-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-02-10" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-03-20" 
},
{
    "event_name": "blabla",
    "event_location" : "somewhere",
    "event_date": "2017-05-05" 
}];

let organized = {};
let months = 'January February March April May June July August Septermber October November December'.split(' ');

unorganized.forEach(event => {
  let date = new Date(event.event_date);
  let month = date.getMonth();
  let monthName = months[month]
  if (!(monthName in organized)) {
    organized[monthName] = [];
  }
  
  organized[monthName].push(event);
});

console.log(organized);

Or you can use lodash and do something like this:

organized = _.groupBy(unorganized, e => months[new Date(e.event_date).getMonth()])

Javascript How to split up events from JSON into months

2 Answers2