显示来自学校班级对象属性的所有学生数据

Question

I want to display all pupil data from 'pupils' which is an array of objects belonging to the School class.

I have created a new instance of the school class and a forEach loop which takes each pupil object and uses document.getElementById().innerHTML to display each property of the object in paragraph text.

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>

My code correctly displays only one pupil (Jane Doe). It should display both.

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

Attendance: 93
</p>
</div>

Answer 1

You're resetting the innerHTML each time - innerHTML = removes all previous content, so you'll only end up with the last pupil. Use += to add the new HTML:

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