Preserve the existing value and then check it against the updated value of a variable within JavaScript

Question

Preserve the existing value and then check it against the updated value of a variable within JavaScript

I utilized an API that supplies me with information in JSON format, retrieved the price of a specific currency, and presented it on a screen using JavaScript. I encapsulated this process within a function that dynamically updates the information at set intervals.

Now, I am looking for a piece of code that can compare the current price value against the next value received. If the new price is higher than the previous one, I want to either change the background color to green or trigger an alert. Conversely, if the new price is lower than the previous one, I would like the background color to switch to red.

Here's the snippet from my existing code:

var auto_refresh = setInterval(
  function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("bids1").innerHTML = myObj.BTCUSDT['bids']['0']['0'];
      }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

  }, 1000);

javascript json ajax

Answer 1

Answer №1

Avoid using intervals with Ajax requests

let value = 0;
const bidsData = document.getElementById("bids1");

function fetchData() {
  fetch('all.json')
  .then(response => response.json())
  .then(data => {
    const newValue = myObj.BTCUSDT['bids']['0']['0'];
    bidsData.innerHTML = newValue
    bidsData.classList.toggle("green",value > newValue)
    bidsData.classList.toggle("red",value < newValue)
    value = newValue;
    setTimeout(fetchData,1000)
  })
}  
fetchData()

Answer 2

Avoid using intervals with Ajax requests

let value = 0;
const bidsData = document.getElementById("bids1");

function fetchData() {
  fetch('all.json')
  .then(response => response.json())
  .then(data => {
    const newValue = myObj.BTCUSDT['bids']['0']['0'];
    bidsData.innerHTML = newValue
    bidsData.classList.toggle("green",value > newValue)
    bidsData.classList.toggle("red",value < newValue)
    value = newValue;
    setTimeout(fetchData,1000)
  })
}  
fetchData()

Answer 3

Answer №2

Clarification

To ensure accuracy, it is advisable to review mplungjan's response above for a more precise method. Although incorporating the variable as instructed is an effective approach, the current method of regularly retrieving data is not recommended and should be revised in accordance with mplungjan's advice.

Suggested solution

It is generally suggested to utilize a global variable (or outside of the function scope) to store the current price and compare this value with the retrieved one.

// initialize current price
let currentPrice = 0;

var auto_refresh = setInterval(function () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            
            let newPrice = myObj.BTCUSDT['bids']['0']['0'];

            if (newPrice > currentPrice) {
                // perform some action like alerting or updating other attributes

            }

            // update the global variable and HTML display
            currentPrice = newPrice;
            document.getElementById("bids1").innerHTML = currentPrice;
        }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

}, 1000);

Depending on your specific needs, you can also conduct different checks and comparisons within the http request handler.

Answer 4

Clarification

To ensure accuracy, it is advisable to review mplungjan's response above for a more precise method. Although incorporating the variable as instructed is an effective approach, the current method of regularly retrieving data is not recommended and should be revised in accordance with mplungjan's advice.

Suggested solution

It is generally suggested to utilize a global variable (or outside of the function scope) to store the current price and compare this value with the retrieved one.

// initialize current price
let currentPrice = 0;

var auto_refresh = setInterval(function () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            
            let newPrice = myObj.BTCUSDT['bids']['0']['0'];

            if (newPrice > currentPrice) {
                // perform some action like alerting or updating other attributes

            }

            // update the global variable and HTML display
            currentPrice = newPrice;
            document.getElementById("bids1").innerHTML = currentPrice;
        }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

}, 1000);

Depending on your specific needs, you can also conduct different checks and comparisons within the http request handler.

Preserve the existing value and then check it against the updated value of a variable within JavaScript

Answer №1

Answer №2

Clarification

Suggested solution

Similar questions

Incorporating Dynamic Javascript: A Step-by-Step Guide

What steps do I need to take to extract the date and month from a single datepicker using the code below?

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

Improprove the Express Router in a Node.js application

What is the best way to compare JavaScript arrays with the same items but in a different order?

Display outcomes for chosen checkboxes

Using Highmaps with PHP and JQuery Ajax: Passing a parameter to the current page and retrieving it with PHP

Vue.js - encountering an issue with undefined response data

Issue with jQuery week calendar: Existing data not loading correctly into the calendar

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

Change a space-separated string containing coordinates into an array of JavaScript objects

What are the steps for retrieving a JSON object within an array?

Missing transitive dependencies have been identified within the node_modules directory when using npm

filling in a label with options from a listbox using panels or a modal popup

Generating binary payload with Node-RED

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

What are the steps to resolve the "undefined cannot read property push" error in Node.js?

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

Benchmark reveals that JSON encoding is faster than Avro encoding in PHP

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?