Crearea unui tabel HTML dintr-un array de obiecte

Să presupunem că avem un array de obiecte, de exemplu, acest array cu utilizatori:

javascriptlet users = [
  {
    name: 'name1',
    surname: 'surname1',
    patronymic: 'patronymic1'
  },
  {
    name: 'name2',
    surname: 'surname2',
    patronymic: 'patronymic2'
  },
  {
    name: 'name3',
    surname: 'surname3',
    patronymic: 'patronymic3'
  },
];

Să creăm un tabel HTML din acest array, în care să scriem datele fiecărui utilizator pe un rând separat.

Cu o astfel de structură de date, de obicei se rulează o buclă prin array și se creează fiecare celulă a tabelului manual, astfel:

html<table id="table"></table>

javascriptlet table = document.getElementById('table');

for (let user of users) {
  let tr = document.createElement('tr');
  
  let td1 = document.createElement('td');
  td1.textContent = user.name;
  tr.appendChild(td1);
  
  let td2 = document.createElement('td');
  td2.textContent = user.surname;
  tr.appendChild(td2);
  
  let td3 = document.createElement('td');
  td3.textContent = user.patronymic;
  tr.appendChild(td3);
  
  table.appendChild(tr);
}

Această abordare oferă o mare flexibilitate - putem reglementa noi înșine ordinea în care datele sunt plasate în celulele tabelului (putem, de exemplu, să schimbăm locul numelui și al prenumelui).

În plus, dacă dorim, putem atașa evenimente pe anumite celule. De exemplu, putem atașa o acțiune la click pe celula cu prenumele și așa mai departe.

javascriptlet employees = [
  {name: 'employee1', age: 30, salary: 400},
  {name: 'employee2', age: 31, salary: 500},
  {name: 'employee3', age: 32, salary: 600},
];