Как заполнить таблицу, имея массив с данными?

Question

[Александр Ситник]

Каким образом осуществить заполнение таблицы?

<table id = 'test'>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Описание</th>
    <th>Цвет глаз</th>
  </tr>
</table>

Данные:

[
  {
    "id": "5c2286fb23e87be312d55d9a",
    "name": {
      "firstName": "Brooks",
      "lastName": "Stone"
    },
    "phone": "[phone]",
    "about": "Qui aliquip esse occaecat voluptate cillum laborum do adipisicing ea. Lorem dolor pariatur exercitation et Lorem voluptate reprehenderit. Culpa nisi sunt laborum culpa eu et nulla aute aliqua commodo cupidatat culpa. Eu laboris dolor enim officia mollit labore proident proident tempor ex minim magna dolor. Ipsum cillum officia irure amet enim voluptate consequat deserunt laborum nulla excepteur pariatur voluptate incididunt. In excepteur adipisicing dolor ea occaecat elit. Irure dolor quis cillum minim voluptate.",
    "eyeColor": "blue"
  },
  {
    "id": "5c2286fb7f4c26c63eff1b66",
    "name": {
      "firstName": "Johnston",
      "lastName": "Tate"
    },
    "phone": "[phone]",
    "about": "Eu ipsum est in exercitation voluptate occaecat fugiat fugiat ea elit ad veniam adipisicing ullamco. Laboris consectetur enim dolore amet exercitation sit non do reprehenderit non. Proident consequat anim non voluptate non culpa sit occaecat adipisicing. Reprehenderit dolor cillum laboris incididunt exercitation quis esse in ad ut voluptate commodo in. Exercitation veniam adipisicing irure ut qui nulla.",
    "eyeColor": "brown"
  },
]

Answer 1

[0xD34F]

const tbody = document.querySelector('#test tbody');
const keys = [ 'name.firstName', 'name.lastName', 'about', 'eyeColor' ].map(n => n.split('.'));
const getVal = (obj, keys) => keys.reduce((p, c) => p != null ? p[c] : p, obj);

for (const n of data) {
  keys.forEach(function(k) {
    this.insertCell().textContent = getVal(n, k);
  }, tbody.insertRow());
}

// или

tbody.insertAdjacentHTML('beforeend', data
  .map(n => `
    <tr>${keys.map(k => `
      <td>${getVal(n, k)}</td>`).join('')}
    </tr>`)
  .join('')
);