Question

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

如前所述，我正在使用访存功能。在内部，我用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);

Answer 1

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

mainDiv.innerHTML = "";

围绕获取功能的setInterval不断制造新的容器，如何仅刷新api数据？

1 个答案: