I am trying to stream a list of json objects from my servers endpoint to my frontend using javascript and html. Below is my code. Currently addEventListener works fine when I click my form button (HTML also added below for reference). Heres my problem:
The list of objects my server endpoint returns is a single list which is continuously having objects appended to the list. So I want my front end to refresh automatically every second to show the latest version. And so I am finding a way for my addEventListener to rerun the function each time after clearing the HTML it is pushing. Currently, I have to click on my button to achieve that and the previously pushed HTML is not getting cleared either. So each time I click on the button, I am getting all the existing HTML displayed as many times as I have clicked the button (old versions) plus the latest version of my endpoint data.
The solution I want to achieve is to be able to click on my start stream button once, and have the function run every X seconds after clearing the older data each time to only show the latest list returned by fetch.
const startStream = document.querySelector('form')
const messageOne = document.querySelector('#message-1')
startStream.addEventListener('submit', (e) => {
e.preventDefault()
messageOne.textContent = 'Streaming...'
function fetchData() {
fetch('http://localhost:1337/dashboard')
.then(response => {
if (!response.ok) {
throw Error('ERROR')
}
response.json().then(events => {
events.forEach(event => {
const html = `<div class="event">
Event: ${event.name}
</div>
`
let div = document.createElement('div');
div.setAttribute("id", "app");
div.innerHTML = html;
document.body.appendChild(div);
})
})
.catch(error => {
console.log(error)
})
})
}
fetchData()
})
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h1>Dashboard</h1>
<form>
<button>Start Stream</button>
</form>
<p id="message-1"></p>
<script src='./js/app.js'></script>
</body>
</html>
Comments
Post a Comment