I am curious, is it possible to livestream data from an api without reloading the page. I'm interested in redeclaring all variables that the view/page was rendered with from start of - Make a async fetch in the background, which then will redeclare the variables and rerender them in some manner.
I'm not quite sure to which approach i should have - it's basicly an idea where i have school activities fetched from an api and rendered through ejs. But i would like a realtime effect, where as i don't need to reload the page to make another fetch to see the variables being rerendered with the fresh data??
I know i could make an AJAX call on the clientside, which means i would have to rewrite my ejs file But that's not what i'm looking for...
Is it possible to livestream data with ejs in any way?
<svg class="Bg" viewBox="0 0 201.305 94">
<path fill="rgba(50,50,69,1)" class="pathBg" d="M 0 0 L 201.3046875 0 L 201.3046875 94 L 0 94 L 0 0 Z">
</path>
</svg>
<svg class="before" viewBox="0 0 16 94">
<% switch (elem.color) {
case "green": %>
<path fill="#78952b" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "red": %>
<path fill="#A83331" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "purple": %>
<path fill="#7D2772" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "blue": %>
<path fill="#3674B5" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
default: case "grey": %>
<path fill="#808080" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
} %>
</path>
</svg>
<div class="holdNavn">
<span><%= elem.class %></span>
</div>
<svg class="tidBg" viewBox="0 0 167 19">
<path fill="rgba(36,36,57,1)" class="pathtidBg"
d="M 9.5 0 L 157.5 0 C 162.7467041015625 0 167 4.253294467926025 167 9.5 C 167 14.74670600891113 162.7467041015625 19 157.5 19 L 9.5 19 C 4.253294467926025 19 0 14.74670600891113 0 9.5 C 0 4.253294467926025 4.253294467926025 0 9.5 0 Z">
</path>
</svg>
<div class="hold">
<span>Hold</span>
</div>
<div class="emneNavn">
<span><%= elem.friendly_name %></span>
</div>
<div class="emne">
<span>Emne</span>
</div>
<div class="tidStart">
<span><%= elem.time %></span>
</div>
<div class="lokaleNummer">
<span><%= elem.classroom %></span>
</div>
<div class="tid">
<span>Tid</span>
</div>
<div class="lokale">
<span>Lokale</span>
</div>
</div>
<% }) %>
</div>```