Создавање HTML табела од низа објекти

Нека имаме дадена некоја низа објекти, на пример, вакава низа со корисници:

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

Ајде да направиме од оваа низа HTML табела, во секој ред од која ќе ги запишеме податоците за секој корисник.

Со таква структура на складирање на податоци обично се покренува еден циклус низ низата и се создава секоја ќелија на табелата рачно, вака:

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);
}

Таквиот пристап дава голема флексибилност - ние можеме самите да го регулираме редоследот на распоредување на податоците по ќелиите на табелата (можеме, на пример, да ги замениме местата на името и презимето).

Освен тоа, по желба можеме да додаваме настани на одредени ќелии. На пример, може на ќелијата со презиме да додадеме некоја акција при клик и така натаму.

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