it_liza,
как-то так ...
<body>
<div id="out"></div>
<script>
const users = [
{
name: "Jack Smith",
age: 23,
img: "https://www.svgrepo.com/show/10103/man.svg",
role: "student",
courses: [
{
"title": "Front-end Pro",
"mark": 20
},
{
"title": "Java Enterprise",
"mark": 100
}
]
},
{
name: "Amal Smith",
age: 20,
img: "https://www.svgrepo.com/show/113567/indian.svg",
role: "student"
},
{
name: "Noah Smith",
age: 43,
img: "https://www.svgrepo.com/show/48218/man.svg",
role: "student",
courses: [
{
"title": "Front-end Pro",
"mark": 50
}
]
},
{
name: "Charlie Smith",
age: 18,
img: "https://www.svgrepo.com/show/169746/man.svg",
role: "student",
courses: [
{
"title": "Front-end Pro",
"mark": 75
},
{
"title": "Java Enterprise",
"mark": 23
}]
},
{
name: "Emily Smith",
age: 30,
img: "https://www.svgrepo.com/show/161467/woman.svg",
role: "admin",
courses: [
{
"title": "Front-end Pro",
"score": 10,
"lector": "Leo Smith"
},
{
"title": "Java Enterprise",
"score": 50,
"lector": "David Smith"
},
{
"title": "QA",
"score": 75,
"lector": "Emilie Smith"
}]
},
{
name: "Leo Smith",
age: 253,
img: "https://www.svgrepo.com/show/51654/professor.svg",
role: "lector",
courses: [
{
"title": "Front-end Pro",
"score": 78,
"studentsScore": 79
},
{
"title": "Java Enterprise",
"score": 85,
"studentsScore": 85
}
]
}
]
class User {
constructor(name, age, role, img, courses){
this.name = name;
this.age = age;
this.role = role;
this.img = img;
this.courses = courses;
}
render(){
let data = `<div class="user__info">
<div class="user__info--data">
<img src="${this.img}" alt="${this.name}" height="50">
<div class="user__naming">
<p>Name: <b>${this.name}</b></p>
<p>Age: <b>${this.age}</b></p>
</div>
</div>
</div>
<div class="user__info--role ${this.role}">
<img src="${this.role}" alt="${this.role}" height="25">
<p>${this.role}</p>
</div>`
return data;
}
renderCourses(){
}
renderAge(){
return `<div>${this.age}</div>`
}
}
class Student extends User{
constructor(name, age, role, img, courses){
super(name, age, role, img, courses);
}
renderCourses(){
super.renderCourses();
let courses = 'no courses';
if(this.courses && this.courses.length) courses = `<p>Courses: </p>` + this.courses.map(a => `<div>${a.title}</div>`).join('');
return courses
}
}
users
.forEach(function(user) {
if(user.role === 'student'){
let student = new Student(user.name, user.age, user.role, user.img, user.courses);
out.insertAdjacentHTML('beforeend', student.render());
out.insertAdjacentHTML('beforeend', student.renderAge());
out.insertAdjacentHTML('beforeend', student.renderCourses()) ;
}
})
</script>
</body>