setInterval вокруг функции fetch продолжает создавать новые контейнеры, как просто обновить данные API? - PullRequest
Новая
       12

setInterval вокруг функции fetch продолжает создавать новые контейнеры, как просто обновить данные API?

0 голосов
/ 28 октября 2018

Атм. Я получаю данные из API и мне нужно каждые несколько секунд сравнивать предыдущие значения данных с текущими, чтобы определить, освободились ли парковочные места, были ли они заполнены или остались равными.

Как уже упоминалосьпрежде чем я использую функцию извлечения.Внутри я создаю контейнеры с помощью 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);

1 Ответ

0 голосов
/ 28 октября 2018

Просто очистите mainDiv перед добавлением данных: 

mainDiv.innerHTML = "";
...