automatically update html with json at certain times of day

Question

I'm helping a community radio station build a new web site. We'd like to have a div that displays the title and host of the current program.

My idea is to turn the radio schedule into a json file that feeds the html page.

My questions are:

1. Is it possible to feed only the relevant show info to html based on the time of day?

2. If the answer to #1 is yes, then what libraries help accomplish this? For example, can jQuery.getJSON parse json based on time? (I haven't seen any info about this in their docs.) Are there other libraries that would be better suited for this task?

Answer 1

Edit, updated

Try

v2

(function () {
    // `titles`, i.e.g., `"morning program"`, `"afternoon program"` , etc.
    var titles = ["0", "1", "2", "3", "4"
                  , "5", "6", "7", "8"
                  , "9", "10", "11", "12"
                  , "13", "14", "15", "16"
                  , "17", "18", "19", "20"
                  , "21", "22", "23", "24"];
    var schedule = (function () {
        var _schedule = $.map(new Array(24), function (k, v) {
            return ["hour " + "<em>" 
                    + v + "</em> " 
                    + new Date().toLocaleString() 
                    + " <em>program " 
                    + titles[new Date().getHours()] 
                    + "</em>"]
        });
        return $("div")
        .html(_schedule[new Date().getHours()]) 
        && $("em").css("color", "blue");
    }());
    schedule();
    var s = setInterval(function () {
        schedule();
    }, 10000);
}());

// v1

// A rough draft pattern . 

// Edit, logic could probably use some adjustments , 
// i.e.g., when moving from `9:00:00 AM` to `10:00:00 AM`
// would necessitate adjusting from `.slice(-10)` to `slice(-11)` ; 
// minimization of redundancies, testing of logic with all possible schedules , 
// date values within ternary 

//    var schedule = {
//        "9:00:00 AM": "Morning Show",
//        "10:00:00 AM": "Afternoon Show"
//    };

//    var t = "9:00:00 AM";
//    var y = new Date().toLocaleString().slice(-11).replace(/:/g, "");
//    y.indexOf("AM") != -1 
//    ? (Number(y.replace(/\s+\w+/g, "")) > Number(t.replace(/:|[a-z]/gi, "")) && Number(y.replace(/\s+\w+/g, "")) < 100000 
//      ? (schedule.hasOwnProperty("9:00:00 AM") 
//        ? $("div").html(schedule["9:00:00 AM"]) // optional jquery `.load()` , `$.post()`
//        : $("div").html("next scheduled programming...")) // optional jquery `.load()` , `$.post()`
//      : $("div").html("next scheduled programming...")) // notification , error message
//    : $("div").html("next scheduled programming..." + schedule["10:00:00 AM"]); // notification , error message

http://jsfiddle.net/guest271314/YV83k/