Многомерные массивы JavaScript

Question

Есть следующий массив:

let names = [
    ['Peavy', 'Wagner', 4],
    ['Stefan', 'Weber', 2],
    ['Jean', 'Bormann', 3]
]

Нужно, чтобы всё это выводилось в цикле через блок item следующим образом:

<div class="list">
    <div class="item">
        <div class="name1">Peavy</div>
        <div class="name2">Wagner</div>
        <div class="code">4</div>
    </div>
    <div class="item">
        <div class="name1">Stefan</div>
        <div class="name2">Weber</div>
        <div class="code">2</div>
    </div>
    <div class="item">
        <div class="name1">Jean</div>
        <div class="name2">Bormann</div>
        <div class="code">3</div>
    </div>
</div>

Перелопатил уйму вариантов, ничего не выходит. Как добиться такого вывода?

Например, вот это работает, но только для последнего элемента:

for (let i = 0; i < names.length; i++) {
    $('.item').each(function() {
        $('.name1').text(names[i][0]);
        $('.name2').text(names[i][1])
        $('.code').text(names[i][2]);
    });
}

Answer 1

На чистом JS можно сделать следующим способом:

Пробежимся по массиву names с помощью метода forEach.
Добавим к innerHTML нашего .list нужную разметку.

(Я бы рекомендовал заменить div.list на ul и div.item на li.)

const list = document.querySelector(".list")

const names = [
  ['Peavy', 'Wagner', 4],
  ['Stefan', 'Weber', 2],
  ['Jean', 'Bormann', 3]
];

names.forEach(([name1, name2, code]) =>
{
  list.innerHTML += `
     <div class="item">
        <div class="name1">${ name1 }</div>
        <div class="name2">${ name2 }</div>
        <div class="code">${ code }</div>
    </div>
  `;
})

.item { margin: 16px 0; }

<div class="list"></div>

БЛОГ НА HUSL

Многомерные массивы JavaScript

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