CODEWITHSUNDEEP
javascriptjson
ST80
ST80

Reputation: 3903

Javascript How to split up events from JSON into months

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)?

Upvotes: 0

Views: 92

Answers (2)

abhishekkannojia
abhishekkannojia

Reputation: 2856

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);

Upvotes: 1

casraf
casraf

Reputation: 21694

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()])

Upvotes: 0

Related Questions