Использование snapshot.forEach в Firestore для создания таблицы

Question

Я пытаюсь вывести массив, заполненный объектами Firestore, на таблицу, но просто отображает последний объект над таблицей

<table class="darkTable">
    <thead>
        <tr>
            <th>List of Available Shows</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <div id="showList"></div>
        </tr>
    </tbody>
</table>

<script>
  firebase.firestore().collection('TV Shows').get().then(snapshot => {

        var i = 0;
        var array = [];

        snapshot.forEach(doc => {

            array[i] = doc.data().show.name;

            //console.log(doc.data().show.name);
            //showList.innerHTML = array[i] + "<br />"; 

            showList.innerHTML = '<td>' + array[i] + '</td>';
            i++;
        });

    }); 
</script>

Это то, как я делаю строки кода td

Answer 1

при условии, что эта разметка:

<div id="showList"></div>

, тогда она работает примерно так:

firebase.firestore().collection('TV Shows').get().then(snapshot => {
    var showList = document.getElementById('showList');
    var html = '<table class="darkTable"><thead><tr>';

    html += '<th>List of Available Shows</th>';
    /* add further columns into here, alike the one above. */

    html += '</tr></thead><tbody>';
    snapshot.forEach(doc => {
        html += '<tr>';

        html += '<td>' + doc.data().show.name + '</td>';
        /* add further columns into here, alike the one above. */

        html += '</tr>';
    });
    html += '</tbody></table>';
    showList.append(html);
});

Answer 2

Вы сбрасываете весь элемент showList с каждой итерацией цикла:

showList.innerHTML = '<td>' + array[i] + '</td>';

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