How to update HTML table with file from JSON and not append table to already existing table

Question

My server has a JSON file in it which updates every so often. I would like this ajax call to read that every e.g. 3 seconds and update a table in my html with the new data. The ajax call below works, HOWEVER keeps on appending the same table to the table already present in the html, creating an infinite loop of identical tables one after the other.

I thought my work around it, this:

record = "";
$("#table").append(record);

Would work, but it doesn't. Any thoughts? Thank you. Also, I believe this is not the most efficient way to do it. If you had any thoughts in that regard it would be great.

AJAX CALL

 var interval = 3000;
 function doAjax() {
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
        var record = "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        $("#table").append(record);
        })
    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "";
                $("#table").append(record);
        }
});
}

Take a look on `setInterval()` method https://www.w3schools.com/jsref/met_win_setinterval.asp — Alexis, Jul 06 '18 at 08:09
Hi @Alexis , it says here that setInterval will fire off the call even if the previous one wasn't completed, so would rather not use it https://stackoverflow.com/questions/20371695/execute-an-ajax-request-every-second — flowover9, Jul 06 '18 at 08:10
your code is designed to do exactly this (using .append). Simplest way is to wrap the table in a div with an id (ex. #table_wrapper) and replace the content there — Lelio Faieta, Jul 06 '18 at 08:29

Daniel R · Accepted Answer · 2018-07-06T08:52:54.043

The reason you get infinite tables is because of the $("#table").append(record); which will append the value to the existing value. Build a variable $newTable that contains all the records and use $("#table").html(newTable) to replace the existing table. Something like this:

var interval = 3000;
 function doAjax() {
 var newTable = "";
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
           newTable += "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        })
        $("#table").html("<table>" + newTable + "</table>");
    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "";
        }
});
}

actually you are nesting a new table inside the first on each complete and still appending rows while fetching new data on each success without removing the previous ones. — Lelio Faieta, Jul 06 '18 at 08:46

Lelio Faieta · Answer 2 · 2018-07-06T08:46:43.393

I'd do something like this: HTML:

<div id="table_wrapper">
<!-- table will go here -->
</div>

JS

var interval = 3000;
 function doAjax() {
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
            var record += "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        })
        $("#table_wrapper").html('<table>'+record+'</table>');

    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "<tr><td></td><td>Updating data</td></tr>";
                $("#table_wrapper").html('<table>'+record+'</table>');
        }
});
}

How to update HTML table with file from JSON and not append table to already existing table

2 Answers2