Динамическое создание и обновление таблицы JS

Question

Есть api в ответе генерируется список, количество данных может изменяться, данные сами могут изменяться, так же может быть пустой список. Как выводить на страницу данный список и постоянно его обновлять?

Я пробовал это реализовать с помощью постоянной генерации таблицы основываясь на полученных данных и setInterval , так же перед генерацией таблицы - очистка тега таблицы.

И из-за этого возникает эффект "моргания" т.к постоянно удаляется таблица а затем появляеться новая и так циклично. Как этого избежать? Какие варианты реализации?

Данные в API(количество строк и данные не статичны (статично только количество столбцов)):

[{"name":"Andrew","surname":"Andrew","email":"[email protected]","info":"test info"},{"name":"Denis","surname":"Denis","email":"[email protected]","info":"test info 1"},{"name":"Petr","surname":"Petr","email":"[email protected]","info":"test info 2"}]

Возможный пустой список:

[]

HTML:

<table id="positionsTable" class="table"></table><script src="table.js"></script>

table.js:

async function getApi() {
fetch('api url')
    .then((response) => response.json())
    .then((json) => data(json));

const data = json => {
    json = json.map(x => {
    return x;
    });
    getTableHeader(Object.keys(json[0]));
    getTableData(json);
};

var Table = document.getElementById("positionsTable");
Table.innerHTML = "";

const getTableHeader = fields => {
    //console.log(fields);
    const table = document.querySelector(".table");
    const thead = document.createElement("thead");
    thead.id = 'tableThead';
    const tr = document.createElement("tr");
    const fragment = document.createDocumentFragment();
    fields.forEach(x => {
        const th = document.createElement("th");
        th.innerText = x;
        th.scope = "col";
        fragment.appendChild(th);
    });
    tr.appendChild(fragment);
    thead.appendChild(tr);
    table.appendChild(thead);
 };

const getTableData = data => {
    //console.log(fields);
    const table = document.querySelector(".table");
    const tbody = document.createElement("tbody");
    tbody.id = 'tableTbody';
    data.forEach(x => {

    const tr = document.createElement("tr");
    const fragment = document.createDocumentFragment();
    const keys = Object.keys(data[0])
    keys.forEach(y => {
        let td = undefined;
        if (y === "ticker"){
            td = document.createElement("th");
            td.scope = "row";
        } else {
            td = document.createElement("td");
        }
        td.innerText = x[y];
        fragment.appendChild(td);
    });
    tr.appendChild(fragment);
    tbody.appendChild(tr);
    table.appendChild(tbody);
   })
};
}

getApi();

setInterval(getApi, 1000);

Подскажите как реализовать такое, может есть более правильные/изящные методы?

БЛОГ НА HUSL

Динамическое создание и обновление таблицы JS

Ответы (0 шт):