HTML lentelės kūrimas iš objektų masyvo

Tarkime, kad turime tam tikrą objektų masyvą, pavyzdžiui, šį naudotojų masyvą:

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

Sukurkime iš šio masyvo HTML lentelę, kurioje kiekvienoje eilutėje įrašysime atskiro naudotojo duomenis.

Esant tokiai duomenų saugojimo struktūrai, paprastai paleidžiamas vienas ciklas per masyvą ir kiekvienas lentelės langelis sukuriamas rankiniu būdu, taip:

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

Šis metodas suteikia didelį lankstumą - mes galime patys reguliuoti duomenų išdėstymo lentelės langeliuose tvarką (galime, pavyzdžiui, sukeisti vardą ir pavardę vietomis).

Be to, norėdami galime priskirti įvykius tam tikriems langeliams. Pavyzdžiui, galima pavardės langeliui priskirti kokį nors veiksmą paspaudus ir pan.

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