filter 를 이용해서 20대 30대 40대 이상 조건을 갖은 버튼 만들어 보기.
배열.filter(콜백함수): 콜백 함수 조건을 만족하는 데이터의 배열 생성. 예제로 배워보자
<!-- 20대 30대 40대를 나누는 버튼을 만들어라. -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter</title>
</head>
<body>
<div class="button-list">
<button data-age='20'>20대이상</button>
<button data-age='30'>30대이상</button>
<button data-age='40'>40대이상</button>
</div>
<ul class="users-list">
</ul>
<script src="index.js"></script>
</body>
</html>const dataList = [
{name:'name1',age:18},
{name:'name2',age:27},
{name:'name3',age:32},
{name:'name4',age:41},
{name:'name5',age:51},
]
function showList() {
let list = ''
for (const data of dataList) {
list += `<li> ${data.name} :${data.age}</li>`
}
document.querySelector('.users-list').innerHTML = list
}
showList()
document.querySelectorAll('button').forEach(el => {
el.addEventListener('click',(event) => {
onClickButton(event)
})
})
function onClickButton(event) {
const targetAge= event.target.dataset.age
const filterdList = dataList.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('.users-list').innerHTML = listHtml
}
result
20대 이상
30대 이상
40대 이상
someone's opinion of you does not have to become your reality