SearchEffect05- filter( )

const searchBox = document.querySelectorAll(".search span");   //조회수 버튼
const cssList = document.querySelector(".list ul");  //속성 리스트
const cssCount = document.querySelector(".count em"); //속성 갯수
//목록 보여주기
let listHTML ='';               //HTML에 보여줄 리스트를 전역 변수로 지정.
function upDataList(list){         //목록 보여주기 함수.
    listHTML ='';
for(const data of list){        //어디에 있는 목록인지
    listHTML +=  `<li>${data.name} : ${data.desc} <span>${data.view}</span></li>`;   // 복합대입연산자 += 사용해서 다 나오게. 
}
cssList.innerHTML = listHTML;   //for문을 이용해서 나오는 결과를 HTML로 출력.
}
upDataList(cssProperty);        //재활용하기 편하게 매개변수 함수로 만들기.

//버튼 클릭하기
searchBox.forEach(span => {         //버튼 클릭하는 이벤트.
    span.addEventListener("click", () => {
        const target =  span.dataset.view;   //HTML 의 데이터 속성값 view
        const filterList = cssProperty.filter(data => data.view >= target);  //target의 값을 조건에 맞춰서 변수로 지정.

        upDataList(filterList);  //함수의 재활용. 
    })
})

filter( )참고

자바스크립트

 

 filter() 메서드는 조건식을 활용하여 조건에 맞는 요소들을 검색해서 출력하는 메서드입니다.  이번 예제에서는 각각의 속성에 임의로 조회수를 부여하여 특정 조회수 이상인 주제를 클릭하면 검색된 결과에 맞게 나오는 예제를 만들었습니다. 이번 예제는 간단하게 작성했지만 조건식을 더 복잡하게 활용하면 더 다양한 결과를 얻을 수 있습니다.