ch3-62 : 조건 만족하는 배열 요소 추출하여 새 배열 만들기

IT/etc

ch3-62 : 조건 만족하는 배열 요소 추출하여 새 배열 만들기

체계성 2022. 6. 1. 22:23

[index.html]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>샘플</title>
  <link rel="stylesheet" href="../../common/css/style.css"/>
  <link rel="stylesheet" href="style.css"/>
  <script src="main.js" defer></script>
</head>
<body class="chapter-3">
<main>
  <div class="button-wrapper">
    <button class="button" data-age="20">20세 이상</button>
    <button class="button" data-age="30">30세 이상</button>
    <button class="button" data-age="40">40세 이상</button>
  </div>
  <ul class="user_list">
  </ul>
</main>
</body>
</html>

[main.js]

// 데이터
const userDataList = [
  { name: '곰', age: 18 },
  { name: '여우', age: 27 },
  { name: '사자', age: 32 },
  { name: '얼룩말', age: 41 },
  { name: '기린', age: 56 }
];

// .button 요소의 이벤트 설정
document.querySelectorAll('.button').forEach((element) => {
  element.addEventListener('click', (event) => {
    onClickButton(event);
  });
});

/**
* 버튼 클릭 시 처리
*/
function onClickButton(event) {
  // 클릭한 버튼의 요소
  const button = event.target;
  // 버튼 요소에서 data-age가져오기
  const targetAge = button.dataset.age;
  // targetAge 이상의 유저 배열 생성
  const filterdList = userDataList.filter((data) => data.age >= targetAge);
  // 배열을 출력
  updateList(filterdList);
}

/**
* 유저 배열을 출력
*/
function updateList(filterdList) {
  let listHtml = '';

  for (const data of filterdList) {
    listHtml += `<li>${data.name} : ${data.age}세</li>`;
  }

  document.querySelector('.user_list').innerHTML = listHtml;
}