Question

I am using JavaScript, JSON, and date.js and I’m trying to parse the JSON file to display only the list of classes that are taking place at the current time. I’ve been able to parse the JSON file so it only shows classes that take place on the current day. I haven’t been able to parse the times correctly though.

Part of my JSON file:

[
{
    "day": "Monday",
    "activities": [
        {
            "activity": "Freestyle ",
            "times": [
                {"start":"6:30 AM","end":"7:15 AM"},
                {"start":"7:15 AM","end":"8:15 AM"},
                {"start":"5:15 PM","end":"6:00 PM"}
            ]
        },
        {
            "activity": "Open Skate ",
            "times": [
                {"start":"11:30 AM","end":"5:00 PM"},
                {"start":"7:30 PM","end":"9:30 PM"}
            ]
        },
        {
            "activity": "Holiday Snowbunnies 1 ",
            "times": [
                {"start":"6:00 PM","end":"6:30 PM"}
            ]
        }
    ]
},
{
    "day": "Tuesday",
    "activities": [
        {
            "activity": "Freestyle ",
            "times": [
                {"start":"5:45 AM","end":"6:30 AM"},
                {"start":"6:30 AM","end":"7:15 AM"},
                {"start":"6:45 PM","end":"7:30 PM"}
            ]
        },
        {
            "activity": "Open Skate ",
            "times": [
                {"start":"10:00 AM","end":"5:00 PM"},
                {"start":"7:30 PM","end":"9:30 PM"}
            ]
        },
        {
            "activity": "Patch ",
            "times": [
                {"start":"10:00 AM","end":"10:30 AM"}
            ]
        }
    ]
}
]

My JavaScript – With Appropriate Function:

function updateSchedule(responseText){
var activitiesDiv = document.getElementById("activities");
var skActivities = JSON.parse(responseText);
var toDay = Date.today().getDayName();
var now = new Date();
var curHour = now.toTimeString('hh:mm tt');

for(var i=0;i<skActivities.length;i++){
    var activityDay = skActivities[i];
    if(activityDay.day == toDay)
    {   
        var toDaysActivities = activityDay.activities;
        for(var j=0;j<toDaysActivities.length;j++){
            var toDayActivity = toDaysActivities[j];

            var curTimeDayActivities = toDayActivity.times;
            for(var k=0;k<curTimeDayActivities.length;k++){
                var curTimeDayStartActivity = curTimeDayActivities[k].start;

                if(curTimeDayStartActivity >= curHour){
                    var div = document.createElement("div");
                    div.innerHTML = toDayActivity.activity + ": " + curTimeDayActivities[k].start;
                    activitiesDiv.appendChild(div);
                }
            }
        }
    }
    continue;
  }
}

Currently the function is returning all classes and their times that take place on the current day of the week. NOTE: The exception is the “11:30 AM Open Skate”. It seems like the only values returned are those that are 9 and under.

Again, my intent is for a user to visit the site and see the classes that are currently taking place.

NOTE: If we don’t need the solution to utilize date.js, I’m fine with that. Just thought I would incorporate it.

Any recommendations would be greatly appreciated.

Answer 1

I don’t think a date library will help much here, it will just add bloat and something else to maintain and worry about. The following gets the “current” activities, it’s up to you to format the returned data and do something with it.

It doesn’t need much date support, it’s mostly filtering the activities. Converting the times to date objects for comparison is trivial (3 lines of code).

var dUtil = {

  // Use provided date object, or today
  // Add support for strings?
  getDayName: function(dateObj) {
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    dateObj = dateObj || new Date();
    return days[dateObj.getDay()];
  },


  // Expects a string like '10:00 AM', assumes current date
  // Note that this will only work where client and server are
  // the same timezone
  timeToDate: function(s) {
    var d = new Date();
    s = s.split(/[: ]/);
    d.setHours((s[2] == 'AM'? s[0] : +s[0] + 12), s[1], 0);
    return d; 
  }
};


function getCurrentActivities(data) {

  var currentActivities = [];
  var todayActivities, activity, name, times, start, end;
  var now = new Date();

  // Get current day name
  var currentDayName = dUtil.getDayName();

  // Get activities from array
  for (var i=0, iLen=data.length; i<iLen; i++) {
    if (data[i].day == currentDayName) {
      todayActivities = data[i].activities;
      break;
    }
  }

  // If there are no activities for today, return undefined
  if (!todayActivities) return;

  // For each activity today, see what are on now
  for (var j=0, jLen=todayActivities.length; j<jLen; j++) {
    activity = todayActivities[j];
    name = activity.activity;

    // Loop over times to see if on now
    times = activity.times;
    for (var k=0, kLen=times.length; k<kLen; k++) {

      if (dUtil.timeToDate(times[k].start) < now && 
          dUtil.timeToDate(times[k].end) > now) {

        // Add activity to result array
        // Format to whatever is needed
        // This gives an array of strings like "Freestyle  - 6:45 PM to 7:30 PM"
        currentActivities.push(name + ' - ' + times[k].start + ' to ' + times[k].end);
      }
    }
  }
  return currentActivities;
}