Array of Objects မှ HTML ဇယားဖန်တီးခြင်း

ကျွန်ုပ်တို့တွင် Object အချို့ပါဝင်သည့် Array တစ်ခုရှိသည်ဆိုပါစို့။ ဥပမာအားဖြင့်၊ ဤကဲ့သို့သော အသုံးပြုသူများ array ဖြစ်သည်။

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

ဤ array မှ HTML ဇယားတစ်ခုဖန်တီးကြပါစို့။ အဲဒီဇယားရဲ့ အတန်းတစ်ခုစီမှာ သီးခြားအသုံးပြုသူရဲ့ဒေတာတွေကို ရေးထည့်ပါမယ်။

ဒေတာသိုလှောင်မှုဖွဲ့စည်းပုံအရ၊ ၎င်းတို့သည် ယေဘူယျအားဖြင့် array ပေါ်တွင် loop တစ်ခုကို run ပြီး ဇယား၏ cell တစ်ခုစီကို လက်ဖြင့် ဤကဲ့သို့ဖန်တီးလေ့ရှိသည်။

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

ဤချဉ်းကပ်မှုသည် ပြောင်းလွယ်ပြင်လွယ်များစွာပေးသည် - ကျွန်ုပ်တို့သည် ဇယားရှိ cell များကို ဒေတာများစီစဉ်ခြင်း (ဥပမာ၊ နာမည်နှင့် မျိုးရိုးအမည်ကို လဲလှယ်နိုင်သည်) ကို ကိုယ်တိုင်ထိန်းညှိနိုင်သည်။

ထို့အပြင်၊ လိုလားပါက ကျွန်ုပ်တို့သည် အတိအကျသော cell များတွင် event များကို ချိတ်ဆက်နိုင်သည်။ ဥပမာအားဖြင့်၊ မျိုးရိုးအမည်ပါသော cell တစ်ခုပေါ်တွင် ကလစ်နှိပ်ခြင်းဖြင့် အခြားလုပ်ဆောင်ချက်များကို ချိတ်ဆက်နိုင်သည်။

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