使用javascript和json进行实时议程

Question

我在网站上有一个div，需要成为事件列表的实时议程。我通过json文件加载事件，并使用javascript用文件中的数据填充div。

问题是数据显示在div中的一列中逐项堆叠，我现在需要将div拆分为三个单独的列/ div。一个用于现在，下一个和即将发生的事件。例如，一个活动是早上7点，下一个是7:30，即将到来的是早上8点。

但我无法选择每个项目并使用css移动它，因为代码只是在页面加载时填充一个项目而我无法一遍又一遍地看到每个项目（视频端内容项目）的索引以显示哪些事件是必要的。

如果我可以通过css将填充的项目格式化为三个单独的列，这会更容易，但我无法弄清楚如何执行此操作。

顺便说一下，这个网站是用FlexBox编写的，所以为什么在其中一个div中有一个“行”。

也有人可以指出如何让它成为实时的正确方向吗？还是可以实现这一目标的任何其他有用的解决方案？

提前感谢您的帮助。

picture of what I'm trying to do

填充数据的功能

function agendaRealTimeUpdate() {
    if ($('.real-time-agenda').length !== 0) {
        videoSideContentType = 'agenda';
        $.getJSON("ac.json", function(data) {
            var sessions = data.session;
            var contentString = '';
            var currentSessionIndex;
            var currentSession;
            var currentTime;
            var currentDay;
            var title;
            var time;
            var room;
            var description;
            var d;
            var i = 0;

            d = new Date();

            //gets the current time and returns it in a string with 3-4 digits EX: "1000" = 10 am 
            currentTime = parseInt(d.getHours().toString() + ((d.getMinutes() < 10 ? '0' : '') + d.getMinutes()).toString());

            currentDay = d.getDate();

            // this loop runs as long as we haven't figured out which session matches the time
            while (currentSessionIndex === undefined && i < sessions.length) {

                //this takes the current time and compares it to the sessions start and end times
                if ((currentTime >= sessions[i].startTime && currentTime <= sessions[i].endTime) && 
                    currentDay === sessions[i].day && 
                    sessions[i].track === "none") 
                {
                        currentSessionIndex = i;
                }

                i++;
            }

            if (currentSessionIndex === undefined) {
                currentSessionIndex = 0;
            }

            // This function finds the sessions that come after the identified current session
            function findNextSessions() {
                var sessionsCopy = sessions.slice(); //make a copy of the sessions array so we aren't altering it when we remove indexes

                for (var z = 0; z < 2; z++) {
                    var index = currentSessionIndex + z; 

                    // breaks out of the loop if the next session is undefined
                    if (sessionsCopy[index] === undefined) {
                        z = 2;
                    }

                    currentSession = sessionsCopy[index];

                    // loops through the sessions and if the session has a track it is removed from the sessionsCopy array
                    while (currentSession.track !== "none") {
                        console.log('has a track: ' + currentSession.track);
                        sessionsCopy.splice(index, 1);
                        currentSession = sessionsCopy[index];
                    }

                    time = currentSession.timeString !== undefined ? "<div class='video-side-content__time'><b>Time:</b> " + currentSession.timeString + "</div>" : ''; 
                    room = currentSession.room !== undefined ? "<div class='video-side-content__room'><b>Room:</b> " + currentSession.room + "</div>" : '';
                    title = currentSession.title !== undefined ? "<div class='video-side-content__secondary-title'>" + currentSession.title + "</div>" : '';

                    description = currentSession.content !== undefined ? "<div class='video-side-content__content'>" + currentSession.content + "</div>" : '';
                    contentString += "<div class='video-side-content__item'>" + time + room + title + description + "</div>";

                }
            }
            findNextSessions();
            $('.real-time-agenda').html(contentString);
        });
    }
}

我正在使用

 <div class="row__item">
    <h2 class="video-side-content__title"><img src="img/agenda-icon.png">&nbsp;Thursday. Sept. 22</h2>
    <div class="row__flex-container">
      <div class="row__item video-side-content__strip video-side-content__strip-left"> </div>
      <div class="row__item video-side-content__row">
        <div class="video-side-content">
          <div class="video-side-content__items">
            <div class="video-side-content__item">
              <h2 class="count-down__sub-header"><br>
                SHOWING NOW</h2><br>
              <div class="real-time-agenda">
                <!--data populates upon page load from the json file
                    It lays the data out as: Time, Title, Room, Description-->

              </div>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>