Divide a collection of objects into groups based on 2-hour time spans

Question

Divide a collection of objects into groups based on 2-hour time spans

I have an array of objects that I need to split into chunks of 2 hours each, starting on the hour (e.g. 10.00 - 12.00, 12.00 - 14.00, etc).

Here is my current solution, but I feel like it may not be the most efficient:

Please consider the day variable, which is defined as moment().startOf('day')

I'm open to a Lodash approach if anyone has one.

Example data:

// array of objects with eventStart timestamps

Expected output:

// chunks of data split into 2-hour intervals

Here is a simplified version of the code for the question:

// code snippet

// JavaScript code

javascript arrays momentjs lodash

Answer 1

Answer №1

To achieve the desired result, you can utilize lodash's _.groupBy() function. The key can be generated by creating a date from the eventStart value, rounding it down to the nearest even hour (start), and then returning a range of start to start + 2:

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}];

const result = _.groupBy(data, o => {
  const hour = new Date(o.eventStart).getHours(); // obtain the hour
  const start = hour - hour % 2; // normalize to the closest even hour
  
  return `${start}-${start + 2}`; // generate the key
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

The same concept can be applied using Array.reduce():

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}];

const createRangeKey = eventStart => {
  const hour = new Date(eventStart).getHours(); // obtain the hour 
  const start = hour - hour % 2; // normalize to the closest even hour
  
  return `${start}-${start + 2}`; // generate the key
};

const result = data.reduce((r, o) => {
  const key = createRangeKey(o.eventStart); // obtain the key
  
  if(!r[key]) r[key] = []; // initialize if not present in the object
  
  r[key].push(o); // add the object to the key
  
  return r;
}, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

If you want to exclude hours outside the 8-24 range, you can check if the start value is less than 8. For example, the entry

{"data":"ignore","eventStart": 1575669600000}

would be disregarded in this case.

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}, {"data":"ignore","eventStart": 1575669600000}];

const result = data.reduce((r, o) => {
  const hour = new Date(o.eventStart).getHours(); // obtain the hour
  
  const start = hour - hour % 2; // normalize to the closest even hour
  
  if(start < 8) return r;
  
  const key = `${start}-${start + 2}`; // generate the key
  
  if(!r[key]) r[key] = []; // initialize if not present in the object
  
  r[key].push(o); // add the object to the key
  
  return r;
}, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To achieve the desired result, you can utilize lodash's _.groupBy() function. The key can be generated by creating a date from the eventStart value, rounding it down to the nearest even hour (start), and then returning a range of start to start + 2:

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}];

const result = _.groupBy(data, o => {
  const hour = new Date(o.eventStart).getHours(); // obtain the hour
  const start = hour - hour % 2; // normalize to the closest even hour
  
  return `${start}-${start + 2}`; // generate the key
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

The same concept can be applied using Array.reduce():

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}];

const createRangeKey = eventStart => {
  const hour = new Date(eventStart).getHours(); // obtain the hour 
  const start = hour - hour % 2; // normalize to the closest even hour
  
  return `${start}-${start + 2}`; // generate the key
};

const result = data.reduce((r, o) => {
  const key = createRangeKey(o.eventStart); // obtain the key
  
  if(!r[key]) r[key] = []; // initialize if not present in the object
  
  r[key].push(o); // add the object to the key
  
  return r;
}, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

If you want to exclude hours outside the 8-24 range, you can check if the start value is less than 8. For example, the entry

{"data":"ignore","eventStart": 1575669600000}

would be disregarded in this case.

const data = [{"data":42986084,"eventStart":1575621000000},
{"data":43729858,"eventStart":1575626400000},{"data":43727728,"eventStart":1575627000000}, {"data":"ignore","eventStart": 1575669600000}];

const result = data.reduce((r, o) => {
  const hour = new Date(o.eventStart).getHours(); // obtain the hour
  
  const start = hour - hour % 2; // normalize to the closest even hour
  
  if(start < 8) return r;
  
  const key = `${start}-${start + 2}`; // generate the key
  
  if(!r[key]) r[key] = []; // initialize if not present in the object
  
  r[key].push(o); // add the object to the key
  
  return r;
}, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Divide a collection of objects into groups based on 2-hour time spans

Answer №1

Similar questions

Is it possible to include a visible comment in an ajax call that can be viewed in Fiddler when analyzing the outgoing data?

Having trouble understanding why my submission button isn't working

Checking a bcrypt-encrypted password in an Express application

Retrieve worldwide data for the entire application in Next.js during the first page load

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Utilizing React and MobX to dynamically render components based on observable arrays

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

Displaying images retrieved from firebase on a React.js application

New item isn't successfully appended to the associative array

Navigating different domains in ExpressJS - Handling CORS

Angular - connecting a function directly

How can an object inside an array be destructured in just one line?

Is it considered poor form to send as many as 100 ajax requests when loading a webpage?

Exploring the world of Ajax with jQuery

Creating element modules in EJS

Invoking an asynchronous method of the superclass from within an asynchronous method in the subclass

Exploring the Fusion of Material UI Searchbox and Autocomplete in React

Is it possible to determine the time format preference of the user's device in Angular? For example, whether they use a 24-hour system or a 12-hour system with AM

New methods for Sequelize ES6 models do not currently exist

Using Jquery to select a specific id for an input element that is a checkbox