How to switch between indexes on fetched data in ejs?

问题

I have sent object array to the front end and I would like it to switch the displayed data between indexes 0 and 1 (uniTimes[0]<->uniTimes[1]), every 5 minutes or so. How can I make this happen, is it only possible by using external frameworks like React/Angular?

**//Array**

  var uniTimes = [
    {
      lectures: [
        {
          title: "Information System Security",
          classroom: "503a.",
          start: "1995-12-17T08:00:00",
          end: "1995-12-17T09:15:00"
        },
        {
          title: "Project Management",
          classroom: "117a.",
          start: "1995-12-17T08:30:00",
          end: "1995-12-17T09:30:00"
        },
        {
          title: "Audiovisual Art",
          classroom: "228a.",
          start: "1995-12-17T09:45:00",
          end: "1995-12-17T12:00:00"
        } 
      ]
    },
    {
      labs: [
        {
          title: "Graphic Design",
          classroom: "505a.",
          start: "1995-12-17T09:15:00",
          end: "1995-12-17T10:15:00"
        },
        {
          title: "Special Effects",
          classroom: "228a.",
          start: "1995-12-17T11:30:00",
          end: "1995-12-17T12:00:00"
        },
        {
          title: "Robotics",
          classroom: "513a.",
          start: "1995-12-17T08:45:00",
          end: "1995-12-17T09:30:00"
        }
      ]
    }
  ]

**//Render code**

res.render('index', { uniTimes: uniTimes});

**//EJS Code**

    <% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
      <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].lectures[i].title %></h3>
        <h3><%= uniTimes[0].lectures[i].classroom %></h3>
        <h3><%= uniTimes[0].lectures[i].start %></h3>
        <h3><%= uniTimes[0].lectures[i].end %></h3>
      </div>
    <% } %>

回答1:

If you want just to toggle visibility between labs and lectures, you can do this with vanilla javascript. No Angular or React is required. Use setInterval()
Create 2 div for each entry and toggle their visibility.

<div id="lectures">
<% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
    <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].lectures[i].title %></h3>
        <h3><%= uniTimes[0].lectures[i].classroom %></h3>
        <h3><%= uniTimes[0].lectures[i].start %></h3>
        <h3><%= uniTimes[0].lectures[i].end %></h3>
    </div>
<% } %>
</div>

<div id="labs" style="display:none">
<% for(var i = 0; i < uniTimes[0].labs.length; i++) { %>
    <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].labs[i].title %></h3>
        <h3><%= uniTimes[0].labs[i].classroom %></h3>
        <h3><%= uniTimes[0].labs[i].start %></h3>
        <h3><%= uniTimes[0].labs[i].end %></h3>
    </div>
<% } %>
</div>


<script type="text/javascript">
    var lectures = document.getElementById("lectures");
    var labs = document.getElementById("labs");
    setInterval(function() {
        if (lectures.style.display === 'none') {
          lectures.style.display = 'block';
          labs.style.display = 'none';
        } else {
            lectures.style.display = 'none';
            labs.style.display = 'block';
        }

    }, 5 * 60000);
</script>

Here is an example which switches data every 2 seconds.

var lectures = document.getElementById("lectures");
var labs = document.getElementById("labs");
setInterval(function() {
    if (lectures.style.display === 'none') {
      lectures.style.display = 'block';
      labs.style.display = 'none';
    } else {
    	lectures.style.display = 'none';
    	labs.style.display = 'block';
    }
    
}, 2000);

<div id="lectures">
  <h2>
    lectures
  </h2>
</div>
<div id="labs" style="display:none">
  <h2>
    labs
  </h2>
</div>

回答2:

After you render you lose any server side ability to change data that's sent to the user, so you either need to use something that maintains a connection to the user using socket.io or something similar, or send all the data needed and change it using client side code

来源：https://stackoverflow.com/questions/56043977/how-to-switch-between-indexes-on-fetched-data-in-ejs