Помочь с классами, конструктор, js

Question

Перепишите данный код с использованием классов.

Создайте класс MonthReport со свойствами month, amount, users.

Добавьте в класс метод render, который будет визуализировать содержимое класса на странице.

Создайте массив экземпляров класса MonthReport со значениями, которые сейчас находятся в массиве source.

Пройдите циклом по массиву и на каждом экземпляре класса MonthReport вызовите метод render.

let source = [
    {
        month: "Январь",
        amount: 20,
        users: ["Claudia Contreras", "Blair Hayden", "Montgomery Cohen"]
    },
    {
        month: "Февраль",
        amount: 140
    },
    {
        month: "Март",
        amount: 115,
        users: ["Blair Hayden", "Montgomery Cohen"]
    }
];

let template = document.querySelector("#monthReport").innerHTML;
let output = document.querySelector("#output");

document.querySelector("button").addEventListener("click", function () {
    for (let i = 0; i < source.length; i++) {
        const monthData = source[i];
        let html = Mustache.render(template, monthData);
        output.insertAdjacentHTML("beforeend", html);
    }
});

мое решение частично :

class MonthReport {
    constructor(month, amount, users) {
        this.month = month;
        this.amount = amount;
        this.users = users;
     
    }
    render() {
       

    }
}

Дальше совершенно не пойму как делать.

код html Создать отчет

<template id="monthReport">
    <div class="report-block">
        <p>месяц {{month}}</p>
        <p>сумма {{amount}}</p>
        <ul></ul>
        {{#users}}
        <!-- начало цикла для вывода массива users -->
        <li>{{.}}</li> <!-- . - текущий элемент массива -->
        {{/users}}
        <!-- конец цикла -->
        </ul>
    </div>
</template>

Answer 1

<button>Создать отчет</button> 
<div id="output"></div>


class MonthReport {
    constructor(month, amount, users) {
        this.month = month;
        this.amount = amount;
        this.users = users || [];
        
        this.render()
    }
    render() {
        const usersTemplate = this.users.map((user) => `<li>${user}</li>`).join('');
        const reportBlockTemplate = `
            <div class="report-block"> 
                <p>Месяц: ${this.month}</p> 
                <p>Сумма: ${this.amount}</p> 
                <ul>

                </ul>
                    ${usersTemplate}
                </ul>
            </ul> 
        </div> 
        `
        document.querySelector('#output').insertAdjacentHTML('beforeEnd', reportBlockTemplate)
    }
}

    const renderAllReports = () => {
        let source = [
            {
                month: "Январь",
                amount: 20,
                users: ["Claudia Contreras", "Blair Hayden", "Montgomery Cohen"]
            },
            {
                month: "Февраль",
                amount: 140,
            },
            {
                month: "Март",
                amount: 115,
                users: ["Blair Hayden", "Montgomery Cohen"]
            }
        ];
        source.forEach((instance) => {
            new MonthReport(instance.month, instance.amount, instance.users)
        })
    }

    document.querySelector('button').addEventListener("click", renderAllReports)

Answer 2

class MonthReport {
  amount;
  month;
  users;

  constructor(month, amount, users) {
    this.month = month ?? null;
    this.amount = amount ?? null;
    this.users = users ?? null;
  }

  render() {
    let reportBlock = document.createElement('div');
    let monthBlock = document.createElement('p');
    monthBlock.textContent = 'Месяц: ' + this.month;

    let sumBlock = document.createElement('p');
    sumBlock.textContent = 'Сумма: ' + this.amount;

    let userBlock = document.createElement('ul');

    if (this.users) {
      for (let user of Object.values(this.users)) {
        let userList = document.createElement('li');
        userList.textContent = user;
        userBlock.append(userList);
      }
    }

    reportBlock.append(monthBlock, sumBlock, userBlock);
    return reportBlock;
  }
}

const monthReportBlock = document.getElementById('month-report');
const btnCreateReport = document.getElementById('create-report');
let source = [{
    month: "Январь",
    amount: 20,
    users: ["Claudia Contreras", "Blair Hayden", "Montgomery Cohen"]
  },
  {
    month: "Февраль",
    amount: 140
  },
  {
    month: "Март",
    amount: 115,
    users: ["Blair Hayden", "Montgomery Cohen"]
  }
];

btnCreateReport.addEventListener('click', () => {
  monthReportBlock.textContent = null;
  for (let report of source) {
    let newReport = new MonthReport(report.month, report.amount, report.users);
    monthReportBlock.append(newReport.render());
  }
});

<button id="create-report">Создать отчет</button>
<div id="month-report"></div>

БЛОГ НА HUSL

Помочь с классами, конструктор, js

Ответы (2 шт):