Как убрать дополнительные создаваемые div NaN

Question

Как убрать дополнительные создаваемые div NaN

Рейтинг: 0Ответов: 1Опубликовано: 02.02.2023

не могу разобраться как решить проблемму.

Делаю запрос по API получаю результат вывожу на сайт. Должно получится 5 полей а система создает еще 4.

Проблема в том что на другом домене если пробовать данный код то все работает так как надо, нре создает 4 поля с NaN.

Я думаю понятней будет на скрине

Код

async function getResponse() {
    let response = await fetch('https://data.binance.com/api/v3/ticker/24hr?symbols=%5B%22BTCUSDT%22,%22ETHUSDT%22,%22BNBUSDT%22,%22LTCUSDT%22,%22ETCUSDT%22%5D');
    let content = await response.json()
    content = content.splice(0, 5)
        
    let list = document.querySelector('.posts')
        
    let key;
            
    for (key in content) {
        
        let prevClosePrice = content[key].prevClosePrice;
        let lastprice = parseFloat(content[key].lastPrice).toFixed(2);
        let percent = parseFloat(content[key].priceChangePercent).toFixed(2);  
        
        list.innerHTML += `
        
            <div class="coins">
                <div class="cont-im-tx">
                    <img src="{%config theme_url%}/statics/coinsimg/etc.svg" width="24px" height="24px">
                    <div class="cont-name-coins">
                        <span class="gl-text-coins">ETC</span>
                        <span class="dec-text-coins">Bitcoin</span>
                    </div>
                </div>
                <div class="cont-balance-coins">
                    <span class="gl-text-coins" id="pricecoin4">${lastprice}</span>
                    
                    <span class="Percentt" id="percentt${key}">
                        <span class="Percent" id="Percent${key}">${percent}</span>
                    </span>
                </div>
            </div>
        
        `
        
        if (prevClosePrice < lastprice) {
            var BTtimerSetButton = document.getElementById("percentt" + key);  
            BTtimerSetButton.classList.add('hzgCfk');
        } else {
            var BTtimerSetButton = document.getElementById("percentt" + key);  
            BTtimerSetButton.classList.add('hzgCfk2');
        }
    }
}
getResponse()

<div class="posts"></div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Можно защититься от вывода NaN, проверив значения функцией isNaN:

for (key in content) {

  let prevClosePrice = content[key].prevClosePrice;
  let lastprice = parseFloat(content[key].lastPrice).toFixed(2);
  let percent = parseFloat(content[key].priceChangePercent).toFixed(2);
  if (isNaN(lastprice) || isNaN(percent)) continue;
  // Остальной ваш код
}

continue пропускает текущую итерацию цикла

Как убрать дополнительные создаваемые div NaN

Ответы