Рендер юзеров системы

[it_liza]

Добрый день! Запуталась, помогите, пожалуйста)
Есть массив юзеров. Я хочу вывести в консоль что то типа
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}`)

[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]

это для домашки, надо именно так и по другому я пока не умею((

[рони]

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>

[рони]

по другому

https://learn.javascript.ru/modifying-document