setInterval围绕fetch函数不断制作新的容器，如何刷新api数据

Question

Atm我正在从一个api获取数据，我需要每隔几秒钟将以前的数据值与当前数据值进行比较，以指示停车位是否空闲、是否已填满或保持不变。

如前所述，我正在使用fetch函数。在内部，我使用createElement创建容器，因此每次运行setInterval时，它都会将整个HTML重新放在前一个容器下面。我正在寻找一种能够刷新api数据并覆盖HTML的方法。

有人知道这个问题的解决方案吗？

我的代码看起来像这个

let url = 
'https://datatank.stad.gent/4/mobiliteit/bezettingparkingsrealtime.json#';
let percent;
function fetchParkingData() {
fetch(url)
.then((resp) => resp.json())
.then(function(data) {
for(let i = 0; i < data.length; i++) {
let parkingData = {
name: data[i].name,
totalCapacity: data[i].parkingStatus.totalCapacity,
availableCapacity: data[i].parkingStatus.availableCapacity,
}
let mainDiv = document.getElementById('mainDiv');
let parkingDiv = document.createElement('div');
parkingDiv.className = 'parking-div';
let name = document.createElement('h2');
let totalCapacity = document.createElement('h3');
let availableCapacity = document.createElement('h4');
let indicator = document.createElement('p');
name.innerHTML = parkingData.name;
totalCapacity.innerHTML = 'Capaciteit: ' + parkingData.totalCapacity;
availableCapacity.innerHTML = 'Beschikbaar: ' + parkingData.availableCapacity;
mainDiv.appendChild(parkingDiv);
parkingDiv.appendChild(name);
parkingDiv.appendChild(totalCapacity);
parkingDiv.appendChild(availableCapacity);
percent =  Math.floor(parkingData.availableCapacity / parkingData.totalCapacity * 100);
console.log(percent);
if(percent < 20) {
parkingDiv.style.backgroundColor = 'red';
} if(percent >= 20 && percent <= 50) {
parkingDiv.style.backgroundColor = 'orange';
} if(percent > 50) {
parkingDiv.style.backgroundColor = 'green';
}
};
})
.catch(function(error) {
// error handling
parkingDiv.innerHTML = 'Data could not be fetched';
});
}
setInterval(fetchParkingData , 2000);

Answer 1

添加数据前只需清除mainDiv：

mainDiv.innerHTML = "";