Почему выводится только последняя карточка товара?

Question

[ForSureN1]

Добрый день. Имеется корзина с товарами, для отправки в бэк, эти карточки мне нужно запихнуть в textarea в виде текста, я в принципе проблему решил, карточка попадает в textarea, но только последняя из всех имеющихся. а нужно чтобы добавлялись все.

function requestTable() {
    const cart = JSON.parse(localStorage.getItem('cart')) || {};
    const ids = Object.keys(cart);
    const renderTable = () => {
      for (let i in ids) {
        const keys = ids[i];
        const articul = cart[keys].articul;
        const name = cart[keys].name;
        const quantity = cart[keys].quantity;
        const totalprice = cart[keys].totalprice;
        console.log(name)
        console.log(quantity)
        console.log(totalprice)
        tableItem = `
        <tr><td>${articul}</td></tr>
        <tr><td>${name}</td></tr>
        <tr><td>${quantity}</td></tr>
        <tr><td>${totalprice}</td></tr>
        `
        textarea.innerHTML = '<table>' + '<tbody>' + tableItem + '<tbody>' + '</table>';
      }
    }
    renderTable();
  }

вызов этой функции я подвесил на кнопки + и - , а так же на иконку корзины.
ну и соответственно эта функция вызывается самостоятельно если находит элемент таблицы на странице с корзиной.
В консоль если выводить переменную, то она выводит все карточки которые имеются в корзине

Так же при удалении товара из корзины, в textarea заменяется последним товаром в корзине

Answer 1

[Павел]

В цикле соберите товары

tableItem += `
        <tr><td>${articul}</td></tr>
        <tr><td>${name}</td></tr>
        <tr><td>${quantity}</td></tr>
        <tr><td>${totalprice}</td></tr>
        `

за циклом добавьте обертку

textarea.innerHTML = '<table>' + '<tbody>' + tableItem + '<tbody>' + '</table>';

Answer 2

[Алексей Дубровин]

textarea.innerHTML = '<table>' + '<tbody>' + tableItem + '<tbody>' + '</table>';
// И так на каждой итерации

Comments

[ForSureN1]

То есть получается мне эту строчку нужно вынести из цикла? Но тогда она будет пустой, ведь область видимости не даст этого сделать, подскажите пожалуйста как быть

[Алексей Дубровин]

Евгений Бабенко,
1) Чтобы добавлять нужно писать "+=" - сокращённая форма записи для:

let a = 0;
a = a + 10 // a+=10

2) Если копать ещё глубже. Плохо в цикле использовать innerHTML.
Тк как браузеру приходиться перерендеривать этот блок каждый раз.
Увеличивается нагрузка на проц пользователя.
Чем слабее компьютер тем критичнее. Если на проекте будет 1000 мелочей...
Для этого вы сначала собираете данные, а потом 1 раз отрисовываете.

[ForSureN1]

Алексей Дубровин, Спасибо за разъяснения, буду учитывать данные ньюансы

Answer 3

[Rsa97]

Потому что вы так в коде написали.
У вас содержимое textarea на каждой итерации цикла полностью переписывается. В результате остаётся только то, что было записано в последней итерации.

Comments

[ForSureN1]

То есть получается мне эту строчку нужно вынести из цикла? Но тогда она будет пустой, ведь область видимости не даст этого сделать, подскажите пожалуйста как быть

[Сергей delphinpro]

Евгений Бабенко, очевидно, нужно дописывать строку, а не переписывать.

как-то так

let tableItem = '';
for (let i in ids) {
  // ...
  tableItem += `
        <tr><td>${articul}</td></tr>
        <tr><td>${name}</td></tr>
        <tr><td>${quantity}</td></tr>
        <tr><td>${totalprice}</td></tr>
        `
}
textarea.innerHTML = '<table>' + '<tbody>' + tableItem + '<tbody>' + '</table>';

[ForSureN1]

Сергей delphinpro, Спасибо вам огромное, просто запутался немного