Separating JSON events into monthly categories using JavaScript

Question

Separating JSON events into monthly categories using JavaScript

I need to organize a list of events by the month they are scheduled to take place. Currently, I have an array with JSON objects for each event, but I want to display them in a specific format:

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

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

...and so on

The way the JSON data is structured currently doesn't allow me to achieve this desired output. Is there a method to manipulate the JSON data to suit my needs?

This is how I am currently receiving my JSON data:

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

The expected result should resemble this structure:

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

Is it possible to transform the existing JSON data into this new format?

javascript json

Answer 1

Answer №1

One way to accomplish this task is by utilizing Array#reduce:

var information = [{
    "example_name": "ex1",
    "example_location" : "there",
    "example_date": "2017-01-10" 
},
{
    "example_name": "ex2",
    "example_location" : "here",
    "example_date": "2017-10-17" 
},
{
    "example_name": "ex3",
    "example_location" : "everywhere",
    "example_date": "2017-02-10" 
},
{
    "example_name": "ex4",
    "example_location" : "nowhere",
    "example_date": "2017-03-20" 
},
{
    "example_name": "ex5",
    "example_location" : "somewhere",
    "example_date": "2017-05-05" 
}];

var monthList = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var groupsInfo = information.reduce(function(acc, obj) {
  var month_data = monthList[new Date(obj.example_date).getMonth()];
  acc[month_data] = acc[month_data] || [];
  acc[month_data].push(obj);
  return acc;
}, {});

var final_result = Object.keys(groupsInfo).sort(function(x, y) {
  return monthList.indexOf(x) - monthList.indexOf(y);
}).map(function(key) {
  var object = {};
  object[key] = groupsInfo[key];
  return object;
});

console.log(final_result);

Answer 2

One way to accomplish this task is by utilizing Array#reduce:

var information = [{
    "example_name": "ex1",
    "example_location" : "there",
    "example_date": "2017-01-10" 
},
{
    "example_name": "ex2",
    "example_location" : "here",
    "example_date": "2017-10-17" 
},
{
    "example_name": "ex3",
    "example_location" : "everywhere",
    "example_date": "2017-02-10" 
},
{
    "example_name": "ex4",
    "example_location" : "nowhere",
    "example_date": "2017-03-20" 
},
{
    "example_name": "ex5",
    "example_location" : "somewhere",
    "example_date": "2017-05-05" 
}];

var monthList = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var groupsInfo = information.reduce(function(acc, obj) {
  var month_data = monthList[new Date(obj.example_date).getMonth()];
  acc[month_data] = acc[month_data] || [];
  acc[month_data].push(obj);
  return acc;
}, {});

var final_result = Object.keys(groupsInfo).sort(function(x, y) {
  return monthList.indexOf(x) - monthList.indexOf(y);
}).map(function(key) {
  var object = {};
  object[key] = groupsInfo[key];
  return object;
});

console.log(final_result);

Answer 3

Answer №2

If you want to organize them by months, one way is to loop through the events and create a new object with each event categorized by its respective month:

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

Alternatively, you can utilize lodash library to achieve the same result more concisely:

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

Answer 4

If you want to organize them by months, one way is to loop through the events and create a new object with each event categorized by its respective month:

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

Alternatively, you can utilize lodash library to achieve the same result more concisely:

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

Separating JSON events into monthly categories using JavaScript

Answer №1

Answer №2

Similar questions

Tips for dealing with Uncaught Error: [nuxt] store/index.js must have a function that returns a Vuex instance

Is it possible to share an .ics file using SparkPost in a Node.js environment?

Managing multiple ajax requests only functions properly when notifications are raised

Invoke the jQuery document.ready function within a separate jQuery or JavaScript function

Issue with zeroLineColor and zeroLineWidth not functioning properly for the x-axis within Chartjs

Troubleshooting a Dysfunctioning Character Counter Feature in a JavaScript Input Field

Is there a way to easily deserialize a JSON object that doesn't have a specified name and is constantly

JavaScript - splitting numbers into multiple parts

Troubleshooting the Issue with Counting JSON Nodes in AJAXейства

Creating a universally accessible handlebars helper in ExpressJS

Challenges encountered when converting Javascript into a Django template

Error Found: The function .setFromEuler() in THREE.Quaternion now requires an Euler rotation as input instead of a Vector3, along with its corresponding order

Is there a way to access the Google Maps instance without the need to define it as a global variable?

Leveraging both chained 'done' and 'then' for numerous asynchronous operations

Guide on setting up a Redirect URL with React Router

Achieve the hidden div scroll effect in React by initially hiding the div and then allowing

Issue encountered while attempting to attach an event listener to an element within a class

Using Javascript/Ajax to manually delete an event handler from a Sys.EventHandlerList() can be achieved by following these

Control the data options available in the autosuggest textbox

Unraveling JSON data in AngularJS