Автоматически обновлять HTML с JSON в определенное время дня

Я помогаю общественной радиостанции создать новый веб-сайт. Мы хотели бы иметь div который отображает название и хост текущей программы.

Моя идея состоит в том, чтобы превратить расписание радио в файл json, который передает html-страницу.

Мои вопросы:

  1. Можно ли передавать только релевантную информацию о шоу в html в зависимости от времени суток?

  2. Если ответ на вопрос № 1 - да, то какие библиотеки помогут достичь этого? Например, может ли jQuery.getJSON анализировать json по времени? (Я не видел никакой информации об этом в их документах.) Существуют ли другие библиотеки, которые лучше подходят для этой задачи?

Источник

2 ответа

Решение

Редактировать, обновлять

Пытаться

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/

Источник

Вы можете получить текущее время от пользователя, а затем отфильтровать массив из JSON, чтобы получить соответствующую информацию. Не забывайте всегда получать время UTC, потому что у пользователей могут быть разные часовые пояса. Я рекомендую вам использовать Momentjs для достижения этой цели.

Если у вас нет всех данных за один раз, вы все равно можете получать данные с сервера каждые x секунд. Будет полезна функция setInterval.

Источник
Другие вопросы по тегам