Отображение данных из магазина в таблицу HTML

Question

Мне нужно отобразить данные моей коллекции упражнений в таблицу HTML. Я думал о том, чтобы сделать это с помощью getElementByID, но он отображает только 1 строку. Как правильно это сделать? Спасибо.

Пожалуйста, смотрите коды ниже:

HTML-код

<div class="container">
              <h2>Manage Exercises:</h2>
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Exercise Name</th>
                        <th>Body Part</th>
                        <th>Exercise Type</th>
                        <th>Sets + Reps/Duration</th>
                        <th>Image</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="tr">
                        <td id="ename"></td>
                        <td id="body_part"></td>
                        <td id="etype"></td>
                        <td id="esets"></td>
                        <td id="eimage"></td>
                       </tr>
                   </tbody>
                </table>

Javscript код:

console.log("Initialisation Successful!");
var db = firebase.firestore();

var exRef = db.collection('Exercises');
var allex = exRef
  .get()
  .then(snapshot => {
    snapshot.forEach(doc => {
        var EName = doc.data().Name;
        var Type = doc.data().Type;
        var BodyPart = doc.data(). BodyPart;
        var Sets = doc.data().Sets;
        const Image = doc.data().Image;

        document.getElementById("ename").value = EName;   
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });

Обновление:

Заменено: document.getElementById("ename").value = EName;

По: document.getElementById("ename").innerText = EName;

Теперь отображается только одна запись, какя могу отобразить их все?

Answer 1

Я думаю, вы захотите попробовать что-то более похожее, используя свойство innerText для элемента:

document.getElementById("ename").innerText = EName;