CODEWITHSUNDEEP
javascriptjsonajaxrequestxmlhttprequest
Stave
Stave

Reputation: 313

How to compare JSON data from the same API request?

I'm still learning a lot about web development and javascript, so forgive me if my explanations are not clear.

I have a function to request from an API informations about cryptocurrency (Price, volume etc.) in a JSON file and then i display the price on the web page every 15 seconds.

I want to change the background color of the card where the price is displayed by comparing the actual price and the new one coming from the next request.

here's my 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);

I was thinking of a simple comparaison between the values and put this code in my loop but i need to stock the actual price somewhere to do the comparison with the new one coming and i'm stuck with that.

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

Or

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

here's the html : 

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

Thanks a lot for your help

Upvotes: 0

Views: 529

Answers (1)

Veridian Dynamics
Veridian Dynamics

Reputation: 1406

You can do this in a myriad of ways, but the simplest is to grab the data from the actual HTML DOM element. 

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

If you're boxBTC string is formatted too much (eg. if you make "1000" -> "1,000"), then you can always also store a data attribute of the raw value inside the DOM as a data attr.

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

Upvotes: 1

Related Questions