Use javascript to reload json properties without hard resetting webpage

Question

JSON example:

[{
    "client": "client1",
    "ip": "127.0.0.1",
    "status": "up"
}, {
    "client": "client2",
    "ip": "127.0.0.2",
    "status": "up"
}]

I have this script to read the JSON file and create tables and apply color to tables according to JSON information:

<script type="text/javascript">

    $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('table').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });

    </script>

The JSON file itself gets updated through a backend python script. Everything works as intended. However, if I want to see update information from JSON file I need to hard-reload the webpage, which is pretty easy to do. But I want javascript to auto reload JSON in the background and apply conditions gracefully without a hard reload of the webpage.

It's probably something trivial to do , but my lack of js knowledge is not helping me. I did a couple of hours worth research without any luck. Any help is appreciated.

If you want the data to change on the client when it changes on the server, you'll need either ... polling, server sent events, or websockets. — adeneo
– adeneo, Commented Aug 10, 2016 at 14:23
You need to put your code in a function, figure out what you want to use as a trigger (button click, timer, etc), and call the function when that event occurs. — Jason P
– Jason P, Commented Aug 10, 2016 at 14:23
no one is. the script is in the header, loading the site gets triggered. — bran
– bran, Commented Aug 10, 2016 at 14:23
Can't you just wrap your code in a Timeout / Interval? See: developer.mozilla.org/en-US/docs/Web/API/WindowTimers/… — Mike Scotty
– Mike Scotty, Commented Aug 10, 2016 at 14:23

Laçin Yavuz · Accepted Answer · 2016-08-10 14:28:27Z

1

You can simply call your function, and related getJSON jQuery method every 3 seconds with an interval as such;

window.setInterval(function(){ getJson(); myFunc(); }, 3000);

answered Aug 10, 2016 at 14:28

Laçin Yavuz

1063 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bran Over a year ago

I am getting this error on browser inspect console: 7 Uncaught TypeError: getJson is not a function

legendemil · Accepted Answer · 2016-08-10 14:31:22Z

1

You can use setInterval or setTimeout to fetch JSON every few seconds.

var timeToRefresh = 5 * 1000; // 5 seconds
setTimeout(function fetchData() {
  $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('table').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });
  setTimeout(fetchData, timeToRefresh);
}, timeToRefresh);

I know that isn't a perfect solution but i hope it will works.

answered Aug 10, 2016 at 14:31

legendemil

1464 bronze badges

1 Comment

bran Over a year ago

Hello I have tried this before. Instead of updating the existing table, it just appends more table at the bottom of the previous and goes on and on. Not ideal of course.

tata.leona · Accepted Answer · 2016-08-10 14:38:26Z

0

You are creating table in your code, but this object is not displayed on your page. Try like this:

var timeToRefresh = 5 * 1000; // 5 seconds
setTimeout(function fetchData() {
  $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('#myTable').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });
  setTimeout(fetchData, timeToRefresh);
}, timeToRefresh);

html

 <table id="myTable"></table>

answered Aug 10, 2016 at 14:38

tata.leona

1,05811 silver badges17 bronze badges

1 Comment

bran Over a year ago

Same issue as @emil Pausz code. and yes I forgot to add table on my example but it was properly used on my working code.

Collectives™ on Stack Overflow

Use javascript to reload json properties without hard resetting webpage

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related