javascript - fetch 函数周围的 setInterval 不断创建新容器，如何刷新 api 数据？

Question

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

如前所述，我正在使用 fetch 功能。在里面，我使用 createElement 创建容器，因此每次 setInterval 运行时，它都会将整个 HTML 再次放置在前一个 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);

标签： javascriptfetchsetinterval

Answer 1

mainDiv只需在添加数据之前清除：

mainDiv.innerHTML = "";