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

Posted 2021-03-26

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

我有一个函数从JSON文件中的加密货币（价格，数量等）的API信息请求，然后我每隔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>

非常感谢你的帮助

答案

您可以通过多种方式执行此操作，但最简单的方法是从实际的HTML DOM元素中获取数据。

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

如果你的boxBTC字符串格式化太多（例如，如果你制作“1000” - >“1000”），那么你总是可以将原始值的数据属性存储在DOM中作为数据attr。

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