Question

I’m a total beginner so I apologize if this question is elementary.

I have a data api that returns a JSON object in this format:

{"Variable": "Number", "Variable2": "Number2"}; //(yes the number is returned as a string)

I want to create a page where the the values from the the object (“Number” & “Number2”) are continuously updated since the values are constantly changing, but the entire page doesn’t need to refresh.

http://sendgrid.com has a great example of what I want to do.

Any help would be great!

Answer 1

The way to handle data that continuously changes is by using setTimeout. There is another method called setInterval, but it is better to use setTimeout with a recursive function. That way if the operation takes longer than expected, the timer won’t be out of sync. Demonstrated through example:

function updateCounter() {
 var timer; 

 document.getElementById("counter").innerText(data.Variable);

 timer = setTimeout(updateCounter, 50);

}