[javascript] 날짜 데이터를 기반으로 데이터를 필터링하는 방법

21 Dec 2023

javascript

날짜 데이터를 사용하여 데이터를 필터링하고 표시하는 것은 JavaScript에서 흔히 하는 작업입니다. 여기에는 몇 가지 방법이 있지만, 일반적으로 비교 함수를 사용하여 원하는 날짜 범위에 해당하는 데이터를 필터링할 수 있습니다.

배열 데이터에서 필터링하기

먼저, 배열 데이터에서 특정 기간의 데이터를 필터링하는 방법을 살펴보겠습니다. 아래 예제는 날짜 범위에 따라 배열을 필터링하는 방법을 보여줍니다.

const data = [
  { date: new Date('2022-01-01') },
  { date: new Date('2022-02-15') },
  { date: new Date('2022-03-20') },
  // ... more data
];

const startDate = new Date('2022-01-01');
const endDate = new Date('2022-02-28');

const filteredData = data.filter(item => item.date >= startDate && item.date <= endDate);
console.log(filteredData);

위의 예제에서는 filter 함수를 사용하여 startDate와 endDate 사이의 날짜에 해당하는 데이터를 필터링합니다.

테이블 데이터에서 필터링하기

웹 애플리케이션에서는 종종 테이블 형식의 데이터를 날짜에 따라 필터링해야 하는 경우가 있습니다. 아래 예제는 테이블 데이터를 필터링하여 특정 기간의 데이터만 표시하는 방법을 보여줍니다.

// HTML 테이블 요소
<table id="dataTable">
  <tr><td>2022-01-01</td><td>...</td></tr>
  <tr><td>2022-02-15</td><td>...</td></tr>
  <tr><td>2022-03-20</td><td>...</td></tr>
  <!-- more rows -->
</table>

// 필터링 함수
function filterTableByDate(startDate, endDate) {
  const rows = document.querySelectorAll('#dataTable tr');
  rows.forEach(row => {
    const date = new Date(row.cells[0].textContent);
    if (date < startDate || date > endDate) {
      row.style.display = 'none'; // 날짜 범위에 해당하지 않으면 숨김
    }
  });
}

// 필터링 적용
const startDate = new Date('2022-01-01');
const endDate = new Date('2022-02-28');
filterTableByDate(startDate, endDate);

위의 예제에서는 HTML 테이블의 각 행을 반복하고, 날짜를 비교하여 지정된 범위에 해당하지 않는 경우 해당 행을 숨깁니다.

요약

JavaScript를 사용하여 날짜 데이터를 기반으로 데이터를 필터링하는 방법에 대해 살펴보았습니다. 배열 데이터에서는 filter 함수를, 테이블 데이터에서는 DOM 조작을 사용하여 필터링할 수 있습니다. 날짜 비교 시에 Date 객체를 사용하여 쉽게 처리할 수 있습니다.

이러한 기술은 데이터 시각화나 사용자 지정 보고서와 같은 다양한 웹 애플리케이션에서 유용하게 활용될 수 있습니다.

배열 데이터에서 필터링하기

테이블 데이터에서 필터링하기

요약

참고 자료