Как в innerHTML обработать цикл и вывести результат?

Question

Можно решить такое именно конкретно внутри innerHTML и не запределами этой конструкции?

let accounts = {
 1: { name: 'Sergey' },
 2: { name: 'Irina' },
};

Object.values(accounts).forEach(e => console.log(e));

document.querySelector('.container').innerHTML = `<div>
  ${Object.values(accounts).forEach(e => `<div>${e.name}</div>`)}
</div>`;

<div class="container"></div>

Answer 1

Надо сделать чуть по-другому:

Сделать где-либо в другом месте цикл, в котором в одну единственную переменную собрать html конкатенацией, а затем этот html впихнуть в innerHTML

Если так сильно хочется, то можно сделать через map или reduce, которые в качестве результата что-то возвращают в итоге (в отличие от forEach). Но я не советую так писать код, потому что это не читаемо

${Object.values(accounts).map(e => `<div>${e.name}</div>`).join('')}

делать так нечитаемо

БЛОГ НА HUSL

Как в innerHTML обработать цикл и вывести результат?

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