Отобразить все данные ученика из свойства объекта школьного класса

Question

Я хочу отобразить все данные ученика из «учеников», которые являются массивом объектов, принадлежащих школьному классу.

Я создал новый экземпляр школьного класса и цикл forEach, который принимает каждого ученикаobject и использует document.getElementById().innerHTML для отображения каждого свойства объекта в тексте абзаца.

class School {
constructor(name, level, pupils) {
   this.name = name;
       this.level = level;
       this.pupils = pupils;
    }
}


let pupils = [
{
   name: 'John Doe',
   age: 17,
   grades: {
     'English': 9,
     'Maths': 9,
     'Sociology': 'A*'
     },
   attendance: 45
},
{
  name: 'Jane Doe',
  age: 17,
  grades: {
     'English': 7,
     'Maths': 6,
     'Sociology': 'B'
     },
   attendance: 93
}
];

const myschool = new School('My School', 'high', pupils);

myschool.pupils.forEach(function(pupil) {
document.getElementById('pupils').innerHTML = `<h2>${pupil.name} 
    </h2><p>Age: ${pupil.age}</p><p>Attendance: ${pupil.attendance} 
    </p>`;
});

HTML:

<div id='pupils'>

</div>

Мой код правильно отображает только одного ученика (Джейн Доу).Должны отображаться оба.

<div id='pupils'>
<p>
Jane Doe
Age: 17

Attendance: 93
</p>
</div>

Answer 1

Вы сбрасываете innerHTML каждый раз - innerHTML = удаляет весь предыдущий контент, поэтому у вас останется только последний ученик.Используйте +=, чтобы добавить новый HTML:

document.getElementById('pupils').innerHTML += `<h2>${pupil.name} 
</h2><p>Age: ${pupil.age}</p><p>Attendance: ${pupil.attendance} 
</p>`;