JS-filter함수

input태그에 영화 제목(또는 일부분 또는 대문자, 소문자)search 버튼을 누르면 그에 맞는 영화 제목을 검색해주는 함수를 만들어 보겠다.

const input = document.querySelector("#input");
const searchbutton = document.querySelector("#submit");

일단 html에서 input 부분과 button 부분을 선택해서 변수에 저장했다!

그리고 저번에 fetch부분에서 카드를 붙여서 만들어 준 부분을 밖으로 빼서 함수로 만들었다(displayMovies)

const displayMovies=(movies)=>{
  movieContainer.innerHTML=""; //기존 화면의 영화 카드는 삭제

  movies.forEach((movie) => {
    const movieCard = createCard(movie);
    movieContainer.appendChild(movieCard);
    movieCard.addEventListener("click", () => {
      const movieID = movieCard.id;
      alert(`id: ${movieID}`);
    });
  });
};

재사용하기 위해 밖에다가 정의함.

const searchmovietitle = () => { //제목 검색 함수
  const movietitle = input.value.toLowerCase(); // 입력된 검색어 소문자로 변환
  const filtermovies = movie.filter((search) => //movie 배열에서 검색어를 포함하는 영화 필터링
    search.title.toLowerCase().includes(movietitle));
  displayMovies(filtermovies);
};

제목을 검색하는 함수(searchmovietitle)
일단 input태그에 입력된 값을 소문자로 변환하여 movietitle에 저장한다.
그 다음 filter함수를 써서 필터링을 한다.
filter함수: filter 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 true를 반환하는 요소만으로 이루어진 새로운 배열을 생성한다.
movie = data.results;
movie 객체에 search라는 매개변수를 이용하여 접근하고, filter한다. movie객체의 'title속성'값을 소문자로 변경합니다(input값도 소문자로 변환하였음)
소문자로 변환된 영화제목에 movietitle(검색어로 입력한 값)이 포함되어있는지를 확인한다.
만약 포함되어있다면 true를 반환하고, 이 영화 객체는 filter링 된다.
그러면 filtermovies 함수로 인해 검색어를 포함하는 영화들만이 남게 된다.
그러면 displayMovies(filtermovies); 호출하여 검색어를 포함하는 영화들만 남은 filtermovies를 매개변수로 받아 화면에 출력되게 합니다.

searchbutton.addEventListener("click", searchmovietitle);

이 함수를 search버튼에 addEventListener로 클릭이벤트를 추가합니다.