Рендер юзеров системы
Добрый день! Запуталась, помогите, пожалуйста)
Есть массив юзеров. Я хочу вывести в консоль что то типа Im ${student.name}, im a ${student.role}, ${student.age} years old, learning ${student.courses}. Но в консоль выводит следующее "Im Jack Smith, im a student, 23 years old, learning [object Object],[object Object]". Как вывести запись в нормальном виде, чтобы был список курсов? Мне нужно еще несколько моментов решить, поэтому будет несколько наследований классов и методов, но пока хотя бы для класса Студенты. 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 = document.write(`<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="${roles[this.role]}" alt="${this.role}" height="25">
<p>${this.role}</p>
</div>`)
return data;
}
renderCourses(){
}
renderAge(){
// console.log(`${this.age}`)
}
}
class Student extends User{
constructor(name, age, role, img, courses){
super(name, age, role, img, courses);
}
renderCourses(){
super.renderCourses();
console.log(`Im ${this.courses}`);
}
}
users
.forEach(function(user) {
if(user.role === 'student'){
let student = new Student(user.name, user.age, user.role, user.img, user.courses);
student.render();
student.renderAge();
console.log(`Im ${student.name}, im a ${student.role}, ${student.age} years old, learning ${student.courses}`)
}
})
|
it_liza,
let title = student.courses.map(a => `"${a.title}"`);
console.log(`Im ${student.name}, im a ${student.role}, ${student.age} years old, learning ${title}`)
|
Цитата:
а как сделать так, чтобы я при вызове метода renderCourse могла получать информацию о курсах? типа как передать это значение title наверх? |
it_liza,
не понимаю, но советую выкинуть и забыть document.write. |
это для домашки, надо именно так и по другому я пока не умею((
|
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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:17. |