객체 배열에서 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);
}

이런 접근 방식은 큰 유연성을 제공합니다. 테이블 셀에 데이터를 배치하는 순서를 직접 조정할 수 있습니다(예를 들어, 이름과 성의 위치를 바꿀 수 있습니다).

또한 원한다면 특정 셀에 이벤트를 추가할 수 있습니다. 예를 들어, 성(last name)이 있는 셀을 클릭했을 때 어떤 동작을 하게 하는 등입니다.

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