Code snippet: Retrieve the previous and upcoming events based on the current date from an array (JavaScript/Angular)

Question

Code snippet: Retrieve the previous and upcoming events based on the current date from an array (JavaScript/Angular)

Is there anyone who can assist me with an algorithm? I have a list of events and need to retrieve the next event and previous events based on the current date.

For example:

I fetch all events from an SQL database like so:

events = [
    {eventId:1, eventDate: "Wen Apr 01 2015 18:41:00 GMT+0300", eventPlace:"Dortmund, DE"},
    {eventId:2, eventDate: "Sun Apr 05 2015 23:41:00 GMT+0300", eventPlace:"Budapest, HU"},
    {eventId:3, eventDate: "Fri Apr 03 2015 13:41:00 GMT+0300", eventPlace:"Madrid, ES"},
    {eventId:4, eventDate: "Mon Jun 01 2015 22:00:00 GMT+0300", eventPlace:"London, EN"},
    .......
    {eventId:100, eventDate: "Mon Aug 31 2015 22:00:00 GMT+0300"}
    ]

If the current date is Sun Apr 05 2015 15:00:00, I would like to obtain:

resultNextEv= {eventId:2, eventDate: "Sun Apr 05 2015 23:41:00 GMT+0300", eventPlace:"Budapest, HU"}
resultLastEv= {eventId:3, eventDate: "Fri Apr 03 2015 13:41:00 GMT+0300", eventPlace:"Madrid, ES"}

What is the most efficient way to achieve this result? (I am using JavaScript / Angular) Any suggestions or ideas?

Thank you

javascript arrays angularjs algorithm object

Answer 1

Answer №1

Start by arranging the events in chronological order:

var sortedEvents = events.sort(function(a, b) {
  return new Date(a.eventDate) - new Date(b.eventDate);
});

Next, go through the sorted events list. If a date is before the target date, mark it as the previous event. If it's after the target date, mark it as the next event and stop iterating:

function getDates() {
  var sortedEvents = events.sort(function(a, b) {
    return new Date(a.eventDate) - new Date(b.eventDate);
  });
  var currentDate = new Date(document.getElementById('date').value),
      index, selectedDate;

  for (index = 0; index < sortedEvents.length; index++) {
    selectedDate = new Date(sortedEvents[index].eventDate);
    if (selectedDate > currentDate) break;
  }

  // Perform actions using sortedEvents[index-1] and sortedEvents[index]
} //getDates

To retrieve the last N events, refer to sortedEvents[index-1], sortedEvents[index-2], and so on up to sortedEvents[index-N].

To fetch the next N events, utilize sortedEvents[index], sortedEvents[index+1], and continue until sortedEvents[index+N-1].

Fiddle

Answer 2

Start by arranging the events in chronological order:

var sortedEvents = events.sort(function(a, b) {
  return new Date(a.eventDate) - new Date(b.eventDate);
});

Next, go through the sorted events list. If a date is before the target date, mark it as the previous event. If it's after the target date, mark it as the next event and stop iterating:

function getDates() {
  var sortedEvents = events.sort(function(a, b) {
    return new Date(a.eventDate) - new Date(b.eventDate);
  });
  var currentDate = new Date(document.getElementById('date').value),
      index, selectedDate;

  for (index = 0; index < sortedEvents.length; index++) {
    selectedDate = new Date(sortedEvents[index].eventDate);
    if (selectedDate > currentDate) break;
  }

  // Perform actions using sortedEvents[index-1] and sortedEvents[index]
} //getDates

To retrieve the last N events, refer to sortedEvents[index-1], sortedEvents[index-2], and so on up to sortedEvents[index-N].

To fetch the next N events, utilize sortedEvents[index], sortedEvents[index+1], and continue until sortedEvents[index+N-1].

Fiddle

Answer 3

Answer №2

let activities = [
    {activityId:1, activityDate: "Wen Apr 01 2015 18:41:00 GMT+0300", location:"Dortmund, DE"},
    {activityId:2, activityDate: "Sun Apr 05 2015 23:41:00 GMT+0300", location:"Budapest, HU"},
    {activityId:3, activityDate: "Fri Apr 03 2015 13:41:00 GMT+0300", location:"Madrid, ES"},
    {activityId:4, activityDate: "Mon Jun 01 2015 22:00:00 GMT+0300", location:"London, EN"}
    ];

 // organize the activities 
 let sortedActivities = activities.sort(function(a, b) {
  return new Date(a.activityDate) - new Date(b.activityDate);
  });

let currentTime = new Date("Sun Apr 05 2015 15:00:00");
let upcomingActivities = [];
let pastActivities = [];

// finding the next activity after the current time
for(let i = 0; i < sortedActivities.length; i++){
  if(new Date(sortedActivities[i].activityDate) > currentTime) {
    upcomingActivities.push(sortedActivities[i]);
    }
}

// finding the previous activity before the current time
for(let i = sortedActivities.length - 1; i >= 0; i--){
  if(new Date(sortedActivities[i].activityDate) < currentTime) {
    pastActivities.push(sortedActivities[i]);
    }
}

console.log("Current Time: " + currentTime);
console.log("Next Activity: " + upcomingActivities.length ? upcomingActivities[0].activityDate : undefined);
console.log("Previous Activity: " + pastActivities.length ? pastActivities[0].activityDate : undefined);

Codepen: http://codepen.io/andrerpena/pen/WbBwbG

If you need multiple future or past activities, simply loop through upcomingActivities or pastActivities. For instance, the next two activities are upcomingActivities[0] and upcomingActivities[1]

Answer 4

let activities = [
    {activityId:1, activityDate: "Wen Apr 01 2015 18:41:00 GMT+0300", location:"Dortmund, DE"},
    {activityId:2, activityDate: "Sun Apr 05 2015 23:41:00 GMT+0300", location:"Budapest, HU"},
    {activityId:3, activityDate: "Fri Apr 03 2015 13:41:00 GMT+0300", location:"Madrid, ES"},
    {activityId:4, activityDate: "Mon Jun 01 2015 22:00:00 GMT+0300", location:"London, EN"}
    ];

 // organize the activities 
 let sortedActivities = activities.sort(function(a, b) {
  return new Date(a.activityDate) - new Date(b.activityDate);
  });

let currentTime = new Date("Sun Apr 05 2015 15:00:00");
let upcomingActivities = [];
let pastActivities = [];

// finding the next activity after the current time
for(let i = 0; i < sortedActivities.length; i++){
  if(new Date(sortedActivities[i].activityDate) > currentTime) {
    upcomingActivities.push(sortedActivities[i]);
    }
}

// finding the previous activity before the current time
for(let i = sortedActivities.length - 1; i >= 0; i--){
  if(new Date(sortedActivities[i].activityDate) < currentTime) {
    pastActivities.push(sortedActivities[i]);
    }
}

console.log("Current Time: " + currentTime);
console.log("Next Activity: " + upcomingActivities.length ? upcomingActivities[0].activityDate : undefined);
console.log("Previous Activity: " + pastActivities.length ? pastActivities[0].activityDate : undefined);

Codepen: http://codepen.io/andrerpena/pen/WbBwbG

If you need multiple future or past activities, simply loop through upcomingActivities or pastActivities. For instance, the next two activities are upcomingActivities[0] and upcomingActivities[1]

Answer 5

Answer №3

If you ever wondered how to achieve this effortlessly, look no further than the open source project jinqJs

var events = [
    {eventId:1, eventDate: "Wen Apr 01 2015 18:41:00 GMT+0300", eventPlace:'Dortmund, DE'},
    {eventId:2, eventDate: "Sun Apr 05 2015 23:41:00 GMT+0300", eventPlace:'Budapest, HU'},
    {eventId:3, eventDate: "Fri Apr 03 2015 13:41:00 GMT+0300", eventPlace:'Madrid, ES'},
    {eventId:4, eventDate: "Mon Jun 01 2015 22:00:00 GMT+0300", eventPlace:'London, EN'},
    {eventId:100, eventDate: "Mon Aug 31 2015 22:00:00 GMT+0300", eventPlace:'London, EN'}
    ]
;


var result1 = jinqJs().from(events).orderBy('eventDate').where(function(row){return Date.parse(row.eventDate) < Date.parse('Sun Apr 05 2015 15:00:00');}).top(1).select();

var result2 = jinqJs().from(events).orderBy('eventDate').where(function(row){return Date.parse(row.eventDate) > Date.parse('Sun Apr 05 2015 15:00:00');}).bottom(1).select();

var result = jinqJs().from(result1,result2).select();

document.body.innerHTML += '<pre>' + JSON.stringify(result, null, 2) + '</pre><br><br>';

<script src="https://rawgit.com/fordth/jinqJs/master/jinqjs.js"></script>

Answer 6

If you ever wondered how to achieve this effortlessly, look no further than the open source project jinqJs

var events = [
    {eventId:1, eventDate: "Wen Apr 01 2015 18:41:00 GMT+0300", eventPlace:'Dortmund, DE'},
    {eventId:2, eventDate: "Sun Apr 05 2015 23:41:00 GMT+0300", eventPlace:'Budapest, HU'},
    {eventId:3, eventDate: "Fri Apr 03 2015 13:41:00 GMT+0300", eventPlace:'Madrid, ES'},
    {eventId:4, eventDate: "Mon Jun 01 2015 22:00:00 GMT+0300", eventPlace:'London, EN'},
    {eventId:100, eventDate: "Mon Aug 31 2015 22:00:00 GMT+0300", eventPlace:'London, EN'}
    ]
;


var result1 = jinqJs().from(events).orderBy('eventDate').where(function(row){return Date.parse(row.eventDate) < Date.parse('Sun Apr 05 2015 15:00:00');}).top(1).select();

var result2 = jinqJs().from(events).orderBy('eventDate').where(function(row){return Date.parse(row.eventDate) > Date.parse('Sun Apr 05 2015 15:00:00');}).bottom(1).select();

var result = jinqJs().from(result1,result2).select();

document.body.innerHTML += '<pre>' + JSON.stringify(result, null, 2) + '</pre><br><br>';

<script src="https://rawgit.com/fordth/jinqJs/master/jinqjs.js"></script>

Code snippet: Retrieve the previous and upcoming events based on the current date from an array (JavaScript/Angular)

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble getting JQuery Ajax POST to work in Codeigniter

What is the correct way to invoke a static TypeScript class function in JavaScript?

With Ionic, you can use one single codebase for both iPad and iPhone

Modify the appearance of a nested div using CSS hover on the main JSX container

Currently exploring AngularJS and looking to create a categorized list

Tips for managing errors when using .listen() in Express with Typescript

Having difficulty transferring data from a JSON file on a different domain to a variable using Ajax

exit out of React Dialog using a button

Add a unique CSS style to both text and image using anchor tags

Exploring Bootstrap4: Interactive Checkboxes and Labels

Upon loading the page, I encountered an issue with the 'errors' variable in my ejs template, resulting in an 'undefined' error

Querying a Database to Toggle a Boolean Value with Jquery, Ajax, and Laravel 5.4

The issue arises when React child props fail to update after a change in the parent state

Extract information from one webpage, proceed to the following page, and repeat the process, utilizing JavaScript on the site

Is it possible to disable the timeout for a single call using Axios?

Strip excess white space from a complex string using Javascript

What is the best way to combine JavaScript objects with identical values?

Ways to deselect checkboxes with Typescript and Jquery

What is the best way to eliminate a count from an array when a button is deselected using JavaScript?

The persistentFilter in the Tabulator is failing to verify for the headerFilterEmptyCheck