如何比较来自同一 API 请求的 JSON 数据？

Question

我还在学习很多关于 Web 开发和 javascript 的知识，如果我的解释不清楚，请原谅我。

我有一个函数可以从 API 请求 JSON 文件中有关加密货币（价格、数量等）的信息，然后我每 15 秒在网页上显示一次价格。

我想通过比较实际价格和来自下一个请求的新价格来更改显示价格的卡片的背景颜色。

这是我的javascript：

function requestPrice(url, domLocation){
var req = new XMLHttpRequest();
req.open("GET", url);
req.addEventListener("load", function() {
    if (req.status >= 200 && req.status < 400) { 
        var data = JSON.parse(req.responseText)
        domLocation.innerHTML = data.ticker.price + "$";
        erreur.innerHTML = "";
    } else {
        erreur.innerHTML = "Erreur: " + req.status + " " + req.statusText;
    }
});
req.addEventListener("error", function () {
    erreur.innerHTML = "Erreur";
});
req.send(null);
}

var btcPrice = document.getElementById('boxBTC'), erreur = 
document.getElementById('erreur');

setInterval(requestPrice("https://api.cryptonator.com/api/ticker/btc-eur", 
btcPrice), 15000);

我正在考虑对这些值进行简单的比较，并将此代码放入我的循环中，但我需要在某处存储实际价格以与即将到来的新价格进行比较，但我坚持这样做。

if (valueOf(data.ticker.price) <= valueOf(data.ticker.price)){
document.getElementById('overviewcard').style.backgroundColor = red;
} else {
document.getElementById('overviewcard').style.backgroundColor = blue;
}

或者

var overviewcard = getElementById('overviewcard');
if (data.ticker.price <= data.ticker.price){
overviewcard.style.backgroundColor = red;
} else { 
overviewcard.style.backgroundColor = blue;
}

这里是html：

    <div class="overviewcard">
       <span id="boxBTC">...</span>
       <span id="erreur"></span>
    </div>

非常感谢您的帮助

Answer 1

您可以通过多种方式做到这一点，但最简单的是从实际的 HTML DOM 元素中获取数据。

var currValue = document.getElementById('boxBTC').innerHTML;
if(valueOf(data.ticker.price) == currValue) {
    // do something
}

如果您的boxBTC 字符串格式过多（例如，如果您设置“1000”->“1,000”），那么您始终可以也存储原始数据的数据属性DOM 中的值作为数据属性。

// assigning the data
document.getElementById('boxBTC').setAttribute('data-val', price);
...
// accessing the data
document.getElementById('boxBTC').getAttribute('data-val');