Δημιουργία πίνακα 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},
];