Update Javascript variable every second

Question

Update Javascript variable every second

I have a script that retrieves the value "average" from a JSON array

<p id="ticker"></p>


<script>
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
  myObj = JSON.parse(this.responseText);
  document.getElementById("ticker").innerHTML = myObj.average; };
  xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
  xmlhttp.send();
</script>

I've been trying to figure out how to make the <p> section refresh every few seconds with no success. If anyone could provide some guidance on this, I would greatly appreciate it.

javascript json

Answer 1

Answer №1

Would you be able to accomplish this task:

<script>
window.setInterval(function(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
  myObj = JSON.parse(this.responseText);
  document.getElementById("ticker").innerHTML = myObj.average; };
  xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
  xmlhttp.send();
}, 1000);
</script>

<p>This code snippet triggers the "function" every second (1000 milliseconds). It is recommended to encapsulate it within another function for better structure:</p>

<pre><code><script>
window.setInterval(updateTicker(), 1000);

function updateTicker(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        myObj = JSON.parse(this.responseText);
        document.getElementById("ticker").innerHTML = myObj.average; 
    };
    xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
    xmlhttp.send();
}
</script>

Answer 2

Would you be able to accomplish this task:

<script>
window.setInterval(function(){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
  myObj = JSON.parse(this.responseText);
  document.getElementById("ticker").innerHTML = myObj.average; };
  xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
  xmlhttp.send();
}, 1000);
</script>

<p>This code snippet triggers the "function" every second (1000 milliseconds). It is recommended to encapsulate it within another function for better structure:</p>

<pre><code><script>
window.setInterval(updateTicker(), 1000);

function updateTicker(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        myObj = JSON.parse(this.responseText);
        document.getElementById("ticker").innerHTML = myObj.average; 
    };
    xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
    xmlhttp.send();
}
</script>

Answer 3

Answer №2

Using a straightforward setInterval is the solution you are looking for.

<p id="ticker"></p>

<script>  
  var ticker = document.getElementById("ticker");  // Let's store that for quick access

  function updateP(){
     //... Perform your desired actions here
     ticker.innerHTML = "..."
  }

  updateP(); // Initiate an immediate update...
  setInterval(updateP, 3000) // ...followed by updates every 3000ms
</script>

Answer 4

Using a straightforward setInterval is the solution you are looking for.

<p id="ticker"></p>

<script>  
  var ticker = document.getElementById("ticker");  // Let's store that for quick access

  function updateP(){
     //... Perform your desired actions here
     ticker.innerHTML = "..."
  }

  updateP(); // Initiate an immediate update...
  setInterval(updateP, 3000) // ...followed by updates every 3000ms
</script>

Answer 5

Answer №3

To continuously fetch the JSON data, you can simply use the following code:

setInterval(()=>{//code }, time)

.

setInterval(getAvg, 5*1000); // retrieve data every 5 seconds

function getAvg() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    myObj = JSON.parse(this.responseText);
    document.getElementById("ticker").innerHTML = myObj.average; 
  };
  xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
  xmlhttp.send();
}

<p id="ticker"></p>

Answer 6

To continuously fetch the JSON data, you can simply use the following code:

setInterval(()=>{//code }, time)

.

setInterval(getAvg, 5*1000); // retrieve data every 5 seconds

function getAvg() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    myObj = JSON.parse(this.responseText);
    document.getElementById("ticker").innerHTML = myObj.average; 
  };
  xmlhttp.open("GET", "https://bitbay.net/API/Public/BTC/ticker.json", true);
  xmlhttp.send();
}

<p id="ticker"></p>

Answer 7

Answer №4

To accomplish this task, you can utilize the setInterval() function, which allows you to call a function or evaluate an expression at specified time intervals in milliseconds:

function fetchData(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState==4 && xhr.status==200){
        var data = JSON.parse(this.responseText); 
        document.getElementById("dataDisplay").innerHTML = data.value; 
    }  
  };
  xhr.open("GET", "https://example.com/api/data.json", true);
  xhr.send();
}

setInterval(fetchData, 2000);

<p id="dataDisplay"></p>

NOTE: In order to avoid parse exceptions, it is important to handle the response only if the request was successful.

Answer 8

To accomplish this task, you can utilize the setInterval() function, which allows you to call a function or evaluate an expression at specified time intervals in milliseconds:

function fetchData(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState==4 && xhr.status==200){
        var data = JSON.parse(this.responseText); 
        document.getElementById("dataDisplay").innerHTML = data.value; 
    }  
  };
  xhr.open("GET", "https://example.com/api/data.json", true);
  xhr.send();
}

setInterval(fetchData, 2000);

<p id="dataDisplay"></p>

NOTE: In order to avoid parse exceptions, it is important to handle the response only if the request was successful.

Answer 9

Answer №5

<p>Press the button and wait for 3 seconds before an alert pops up saying "Hello".</p>
<p id="text">Once you click, the text here will change and a countdown will begin, incrementing every 0.5 seconds. This cycle will continue endlessly...</p>
<button onclick="myFunction()">Give it a go</button>

<script>
var i=0;
function myFunction() {

    setInterval(function(){ document.getElementById('text').innerHTML = i++; }, 500);
}
</script>

</body>
</html>

Answer 10

<p>Press the button and wait for 3 seconds before an alert pops up saying "Hello".</p>
<p id="text">Once you click, the text here will change and a countdown will begin, incrementing every 0.5 seconds. This cycle will continue endlessly...</p>
<button onclick="myFunction()">Give it a go</button>

<script>
var i=0;
function myFunction() {

    setInterval(function(){ document.getElementById('text').innerHTML = i++; }, 500);
}
</script>

</body>
</html>

Update Javascript variable every second

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

Themeing for dark mode using styled components in Next JS

Exclude the HTML attribute prior to displaying

Using pandas to transform nested JSON into a flat table structure

Avoiding infinite digest loops caused by ng-model with getterSetter in AngularJS

Trouble with jQuery: Tackling a Basic String and Variable Issue

Encountering an Issue in Angular 5: Trouble Retrieving Information from Local JSON Source [object Object]

Is it possible to direct the user to a particular link upon swiping to unlock?

Simplify your bootstrap Input field code by utilizing components or a similar method in Vue.js

saving a JSON element in a JavaScript array

Creating a JSON array in JavaScript for future reference

What is the method for retrieving values from an object using keys that are subject to change?

Having trouble finding a solution because Ajax/JSON is only retrieving a single result from the PHP/SQL file

`Zooming and scrolling feature within a masked image`

Executing two AJAX requests simultaneously with Django, AJAX, and jQuery in a single event

At what point is it appropriate for me to delete the token?

Verifying the presence of an object in an array based on its value using TypeScript

How to manage simultaneous requests in Parse Server Cloud Code

What is the best approach to extract data from this specific JSON array within Android Studio?

Forward the jsp to the servlet before navigating to the following page