Как можно сократить запись создания одинаковых элементов?

Question

[Mark]

В tr добавляется несколько td. Вот такой вариант записи сейчас:

function createPayment({id, sum, system, date})
{
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const addPaymentCell = value => {
        const td = document.createElement("td");
        td.innerText = value;
        return td;
    };

    payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));
}

Мне кажется, его можно сократить как-то правильно использовав цикл, чтобы не дублировать:

payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));

По-сути, можно применить foreach. Но придётся заново создавать объект, прописывая переменные: id, sum, system, date. Либо отказаться от деструктурирующее присваивание в аргументах функции(либо провести его позже).

function createPayment({id, sum, system, date}) {
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const object = {id, sum, system, date};
    object.forEach(value => {
        const td = document.createElement("td");
        td.innerText = value;
       payment.append(td);
    });
}

А можно ли как-то чисто перечислив переменные создать по ним обход циклом?

Answer 1

[0xD34F]

Значения собрать в массив: const values = [ id, sum, system, date ];.

Дальше есть варианты:

payment.innerHTML = values.map(n => `<td>${n}</td>`).join('');

// или

values.forEach(n => payment.insertCell().textContent = n);

// или

payment.append(...values.map(n => {
  const td = document.createElement('td');
  td.innerText = n;
  return td;
}));

Или, то же самое, но с массивом ключей вместо значений:

- function createPayment({id, sum, system, date}) {
+ function createPayment(data) {

- const values = [ id, sum, system, date ];
+ const keys = [ 'id', 'sum', 'system', 'date' ];

- values.forEach(n => payment.insertCell().textContent = n);
+ keys.forEach(n => payment.insertCell().textContent = data[n]);