0

подскажите пожалуйста как можно сделать что бы данный код обновлялся каждую секунду , при использование 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()
0

1 ответ 1

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>

2
  • Спасибо, это то что мне нужно было 26 ноя 2022 в 13:12
  • @itscoldhell не за что. В основной функции тоже есть изменения. Добавлены ID каждому посту. По нему и происходит обновления нужных данных 26 ноя 2022 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.