[javascript] 필터링된 데이터를 테이블 형태로 출력하는 방법

21 Dec 2023

javascript

이번에는 JavaScript를 사용하여 필터링된 데이터를 테이블 형태로 출력하는 방법에 대해 알아보겠습니다.

필터링된 데이터 가져오기

우선, 데이터를 가져와 필터링하는 방법에 대해 알아보겠습니다. 예를 들어, JSON 형식의 데이터를 가져와 필터링한다고 가정해보겠습니다.

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 28 },
  // more data
];

// 필터링 조건에 맞는 데이터 가져오기
const filteredData = data.filter(item => item.age > 28);

위의 예제에서는 data 배열에서 age가 28보다 큰 데이터만을 필터링하여 filteredData에 저장하는 방법을 보여줍니다.

데이터를 테이블로 출력하기

필터링된 데이터를 테이블 형태로 출력하기 위해서는 HTML과 JavaScript를 결합하여 화면에 표시할 수 있습니다.

function displayDataAsTable(data) {
  const table = document.createElement('table');
  // create table header
  const header = table.createTHead();
  const headerRow = header.insertRow(0);
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });

  // create table body
  const body = table.createTBody();
  data.forEach(item => {
    const row = body.insertRow();
    Object.values(item).forEach(value => {
      const cell = row.insertCell();
      cell.textContent = value;
    });
  });

  document.body.appendChild(table);
}

// 필터링된 데이터를 테이블로 출력
displayDataAsTable(filteredData);

위의 코드에서 displayDataAsTable 함수는 매개변수로 받은 데이터를 테이블 형태로 생성하여 HTML에 추가하는 방법을 보여줍니다.

이제 위의 방법을 활용하여 필터링된 데이터를 테이블 형태로 효과적으로 출력할 수 있습니다.

참고 자료: