Как обновить HTML-таблицу с файлом из JSON и не добавлять таблицу в уже существующую таблицу

Question

Мой сервер содержит файл JSON, который обновляется очень часто. Я хотел бы, чтобы этот вызов ajax читал, например, каждый 3 секунды и обновите таблицу в моем HTML с новыми данными. Вызов ajax ниже работает, ОДНАКО продолжает добавлять ту же таблицу к таблице, уже присутствующей в html, создавая бесконечный цикл идентичных таблиц одну за другой.

Я думал, что моя работа вокруг этого, это:

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

Будет работать, но это не так. Какие-нибудь мысли? Спасибо. Кроме того, я считаю, что это не самый эффективный способ сделать это. Если бы у вас были какие-либо мысли на этот счет, было бы замечательно.

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);
        }
});
}

Answer 1

Я бы сделал что-то вроде этого: 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>');
        }
});
}

Answer 2

Причина, по которой вы получаете бесконечные таблицы, заключается в том, что $("#table").append(record); добавит значение к существующему значению. Создайте переменную $newTable, которая содержит все записи, и используйте $("#table").html(newTable) для замены существующей таблицы. Примерно так:

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 = "";
        }
});
}