ऑब्जेक्ट्स की array से HTML टेबल बनाना

मान लीजिए कि हमारे पास ऑब्जेक्ट्स की एक array है, उदाहरण के लिए, users के साथ इस प्रकार की array:

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

आइए इस array से एक HTML टेबल बनाएं, जिसकी प्रत्येक पंक्ति में एक अलग user का डेटा लिखा होगा।

डेटा संग्रहीत करने की ऐसी संरचना के साथ, आमतौर पर array पर एक लूप चलाया जाता है और टेबल की प्रत्येक सेल को मैन्युअल रूप से इस तरह बनाया जाता है:

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},
];