Как сделать обновление js fetch каждую секунду

Question

подскажите пожалуйста как можно сделать что бы данный код обновлялся каждую секунду , при использование SetInterval, код не обновляется а создаются новый объекты.

Если быть точным мне нужно обновлять каждую секунду ${parseFloat(content[key].lastPrice)} и {parseFloat(content[key].priceChangePercent).toFixed(2)}.

Код можно найти https://jsfiddle.net/xe2s4act/1/

Я понимаю что тут ответ вроде может быть простым, но я уже голову себе поломал не могу найти решение)

Буду рад вашей помощи.

async function getResponse() {
    let response = await fetch('https://api.binance.com/api/v3/ticker/24hr?symbols=%5B%22BNBUSDT%22,%22BTCUSDT%22,%22ETHUSDT%22,%22LTCUSDT%22,%22SOLUSDT%22%5D');
    let content = await response.json()
    content = content.splice(0, 5)

    let list = document.querySelector('.posts')

    let key;

    //for in
    for (key in content) {

        list.innerHTML += `
                            <div class="post">
                                <h4>${content[key].symbol}</h4>
                                <img src="img/${key}.png" alt="image" width="28px">
                                <p>${parseFloat(content[key].lastPrice)}</p>
                                <p class="Percent" id="Percent${key}">${parseFloat(content[key].priceChangePercent).toFixed(2)}</p>
                            </div>
                        `
        let symbol = content[key].symbol;           
        let prevClosePrice = content[key].prevClosePrice;
        let lastprice = content[key].lastPrice;

        if (prevClosePrice < lastprice) {
            var BTtimerSetButton = document.getElementById("Percent" + key);  
            BTtimerSetButton.classList.add('hzgCfk');
        } else {
            var BTtimerSetButton = document.getElementById("Percent" + key);  
            BTtimerSetButton.classList.add('hzgCfk2');
        }

        console.log(content[key])
        console.log(prevClosePrice)
        console.log(lastprice)
        console.log(symbol)
    }
}

getResponse()

Answer 1

Или каждый раз перед циклом for in очищать html

list.innerHTML = '';

Или добавить специальную функцию для обновления, к примеру updateData, и запустить её в нужном Вам интервале в конце главной функции:

async function getResponse() {
    let response = await fetch('https://api.binance.com/api/v3/ticker/24hr?symbols=%5B%22BNBUSDT%22,%22BTCUSDT%22,%22ETHUSDT%22,%22LTCUSDT%22,%22SOLUSDT%22%5D');
    let content = await response.json()
    content = content.splice(0, 5)

    let list = document.querySelector('.posts')

    let key;
    list.innerHTML = '';
    
    for (key in content) {
        
    let symbol = content[key].symbol;           
        let prevClosePrice = content[key].prevClosePrice;
        let lastprice = content[key].lastPrice;
    
        list.innerHTML += `
                            <div class="post" id="${content[key].symbol}">
                                <h4>${content[key].symbol}</h4>
                                <img src="img/${key}.png" alt="image" width="28px">
                                <p class="last-price">${parseFloat(lastprice)}</p>
                                <p class="Percent" id="Percent${key}">${parseFloat(content[key].priceChangePercent).toFixed(2)}</p>
                            </div>
                        `       

        if (prevClosePrice < lastprice) {
            var BTtimerSetButton = document.getElementById("Percent" + key);  
            BTtimerSetButton.classList.add('hzgCfk');
        } else {
            var BTtimerSetButton = document.getElementById("Percent" + key);  
            BTtimerSetButton.classList.add('hzgCfk2');
        }

        /*console.log(content[key])
        console.log(prevClosePrice)
        console.log(lastprice)
        console.log(symbol)*/
    }
  
  setInterval(updateData,1000);
}

async function updateData(){
    let response = await fetch('https://api.binance.com/api/v3/ticker/24hr?symbols=%5B%22BNBUSDT%22,%22BTCUSDT%22,%22ETHUSDT%22,%22LTCUSDT%22,%22SOLUSDT%22%5D');
    let content = await response.json();
    content = content.splice(0, 5);  
  for (let key in content) {
    let id = content[key].symbol;
    let lastprice = parseFloat(content[key].lastPrice);
    let percent = parseFloat(content[key].priceChangePercent);        
    document.querySelector('#'+id+' .last-price').textContent = lastprice;
    document.querySelector('#'+id+' .Percent').textContent = percent;  
  }
}


getResponse()

.hzgCfk2 {
    background: #ea3943 !important;
}
.hzgCfk {
    color: #fff;
    border-radius: 6px;
    background: #16c784;
}
.Percent {
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    width: 62px;
    padding: 6px 10px;
    text-align: center;
}
.post {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test Kurse</title>

    <link rel="stylesheet" href="">
</head>
<body>
    
    <ul class="posts">
        
    </ul>


    <script src="script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Как сделать обновление js fetch каждую секунду

Ответы (1 шт):