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

Question

[AlexsandrLomaev]

Есть многомерный массив (не так давно взялся за их разбор)

let arr = [
    [
        "Alex",
        "Maria",
        "Alena",
        "Dima"
    ],
    [
        21,
        23,
        19,
        20
    ],
    [
        2411,
        4662,
        8853,
        2132
    ]
];

В основном массиве содержится вся информация о пользователях, в первом вложенном - Имена, второй - возраст, третий - условный индификатор. Моя мысль такая, сделать вывод этих вложенных массивов так, чтобы каждая строчка в вложенных массивах совпадала, к примеру (Alex 21 2411) и т.д

Вот что я пробовал сделать

for (let i = 0; i < arr.length; i++) {

    for (let j = 0; j < arr[i].length; j++) {
       
        res.innerHTML += `Arr: ${arr[i][j]}`;
        
    }
};

Так выглядит код целиком

let arr = [
    [
        "Alex",
        "Maria",
        "Alena",
        "Dima"
    ],
    [
        21,
        23,
        19,
        20
    ],
    [
        2411,
        4662,
        8853,
        2132
    ]
];

for (let i = 0; i < arr.length; i++) {

    for (let j = 0; j < arr[i].length; j++) {
       
        res.innerHTML += `Arr: ${arr[i][j]}`;
        
    }
};

Answer 1

[Rsa97]

for (let j = 0; j < arr[0].length; j += 1) {
  for (let i = 0; i < arr.length; i += 1) {
    res.innerHTML += `${arr[i][j]} `;
  }
  res.innerHTML += '<br>';
}

Comments

[AlexsandrLomaev]

Спасибо за решение! буду разбираться, что тут да как)

Answer 2

[0xD34F]

Сделаем таблицу. Какие у неё будут столбцы: const columns = [ 'name', 'age', 'id' ];.

Можно собрать разметку:

res.innerHTML = `
  <table>
    <thead>
      <tr>${columns.map(n => `<th>${n}</th>`).join('')}</tr>
    </thead>
    <tbody>${arr[0]?.map((_, i) => `
      <tr>${arr.map(n => `
        <td>${n[i]}</td>`).join('')}
      </tr>`).join('') ?? ''}
    </tbody>
  </table>`;

Или создавать элементы напрямую:

const table = document.createElement('table');

columns.forEach(function(n) {
  this.append(document.createElement('th'));
  this.lastChild.textContent = n;
}, table.createTHead().insertRow());

arr[0]?.forEach(function(_, i) {
  const tr = this.insertRow();
  arr.forEach(n => tr.insertCell().textContent = n[i]);
}, table.createTBody());

res.append(table);