Home/ Questions/Q 9153675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:18:43+00:00

I have a JSON like what you see below, that I want to keep

  • 0

I have a JSON like what you see below, that I want to “keep alive”. I would like to continually query the server (“refresh” at a continual interval, say 30 seconds) and update what’s displayed on the page accordingly. The JSON appears as so:

[
        {
            "Name": "Paul",
            "Date": "2012-10-26",
            "Score": 8
        },
        {
            "Name": "Janet",
            "Date": "2012-10-24",
            "Score": 18
        },
        {
            "Name": "Rick",
            "Date": "2012-10-26",
            "Score": 13
        }
]

My current (static) version to display this is:

<body>
<script>
$.getJSON('myjson.json', function(data) {
for (var i in data) {
var Name = data[i].Name;
var Score = data[i].Score;
}           
var output = "<ul>";
for (var i in data) {
output += "<li>" + Name + "--" + Score;
}
output += "</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
<div id="placeholder"></div>
</body>

This of course displays the data, but how would I “stream” the changes to “Score” as the json changes on the server (without refreshing the page)?

Is this what’s referred to as polling?

Any help is appreciated. Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to use a timer, or to be more specific, setInterval()…

    <script>
    function getData() {
        $.getJSON('myjson.json', function(data) {
            for (var i in data) {
                var Name = data[i].Name;
                var Score = data[i].Score;
            }           
            var output = "<ul>";
            for (var i in data) {
                output += "<li>" + Name + "--" + Score;
            }
            output += "</ul>";
            document.getElementById("placeholder").innerHTML=output;
        });
    }
    setInterval(getData, 30000);

    $(function() {
        getData();
    });
</script>

    The above script will run the getData() function at document.ready and then every 30 seconds, and update the #placeholder element with the return value.

    • 0