12일차( forEach() / filter() / includes() )

*하루씩 밀려 올라갔다.

11일차 : 5/30(월),

12일차 : 5/31(화)

 

input에 값을 입력후 버튼을 클릭하면 filter() 함수가 작동하여

값에 해당하는 제목의 card를 보여주게 된다.

 

처음에는 간단하게 짜가면서 시작했는데 점점 복잡하게 짜고있는 나를 발견했다.

그래서 코드를 하나씩 console에 다시 찍어봤다. 

            var searchBtn = document.querySelector('.btn-movie');

            searchBtn.addEventListener('click', function(){

                // alert('p')

                for(let i = 0; i <= lists.length; i++){

                    let listInner = lists; //각 카드의 배열을 선언 해줘

                    let listTitle = listInner[i]['title']; //그 각 카드의 제목을 선언해주고

                    // console.log(listTitle);

                    const inputText = document.querySelector(".search-box").value;

                    console.log(inputText)

                    if(inputText == listTitle){ // 이 함수를 클릭하면 input에 입력된 것과 비교해서

                        listTitle[i].style.display = "flex"; // 같으면 남겨줘

                    } else {

                        listTitle[i].style.display = "none"; // 다르면 diplay =  "none"해줘

                       

                    }

                }

            })

console.log(inputText)까지는 잘 나오는데,

 

"입력된 값 (inputText)와 카드의 제목 (listTitle)이 같다면 보여줘 /

아니라면 안보이게 해줘" 부분이 error가 떴다.

 

이 기능도 하루 종일 붙잡고 있다보니 이러다 진짜 하루 다 갈거 같았다.

튜터님들에게도 질문을 하고도 여기까지 왔는데 길을 찾을거 같다는 생각에 또 다시 몇 시간을 할애했다. 

 

계속 길을 못 찾다가.

전 팀원분에게 현재 나의 문제를 공유해드렸고 나랑은 다른 로직이지만,

그 분은 맞닥들인 문제들을 어떻게 해결했는지 들어봤다.

 

 

// filter 사용해서 input값이 들어있는 영화들 추출하는 filterMovies 함수 선언

function filterMovies(movieTitle) {

 

      //가져온 api를 lists로 저장 후에(위에서 선언) 이를 filter()를 통해 movieTitle 추출해준다

      filterArr = lists.filter((item) =>

      item.title.toLowerCase().includes(movieTitle)

);

      //필터가 된 후 들어갈 자리를 비워준다.

      document.getElementById("movieInfo").innerHTML = "";

      // forEach를 통해 해당 값들을 돌려주는데 각 항목을 다시 선언해주었다;;

      // 다시 하기 싫어서 다른 방법을 하루종일 찾았는데 어쩔 수 없었다.. 방법을 못 찾았으니;

      filterArr.forEach((data) => {

      let title = data.title;

      let vote_average = data.vote_average;

      let overview = data.overview;

      let poster_path = data.poster_path;

      let id = data.id;

      let img_url = `https://image.tmdb.org/t/p/w300${poster_path}`;

 

      //html 그 자리에 그대로 넣어준다. 문제 없이 여기서는 잘 보인다.

      //다만 나는 각 요소의 태그값들을 하나하나 겹치지 않게 지정해줬다. 큰 차이는 없는데 찾을 때 조금 더 수월하다.

      let temp_html = ``;

      temp_html = `<div onclick = alert("영화"+"id:"+"${id}")>

                                    <div class ="newImg"><img src = ${img_url} /></div>

                                    <h5>${vote_average}</h5>

                                    <h2>${title}</h2>

                                   <p>${overview}</p>

                            </div>`;

      //비워져있는 movieInfo에 넣어준다.

      document.getElementById("movieInfo").innerHTML += temp_html;

   });

}

      // input 값과 button값을 받아서 변수에 할당

      const searchInput = document.querySelector("#inputBox");

      const searchButton = document.querySelector(".btn-movie");

 

      // user가 입력한 input값을 받는 btnClick 함수 선언

      // input 값에 들어간 값이 비어있으면 "Please write movie title"

      // 길이가 50자가 넘으면 "your movie title is too long" // 모두 다 통과했다면

      function btnClickDisplay() {

            let movieTitle = searchInput.value.toLowerCase().trim();

            if (movieTitle === "") {

                  alert("Please write movie title");

            } else if (movieTitle.length > 50) {

                  alert("your movie title is too long");

            } else {

 

      // filter 사용해서 input값이 들어있는 영화들 추출하는 filterMovies 함수 호출

      filterMovies(movieTitle);

    }

}

           // button 클릭 시 이벤트 btnClick 함수 호출

            searchButton.addEventListener("click", btnClickDisplay);

         })

        .catch(err => console.error(err));

}

 

결과물 내가 하루종일 짜본 코드를 그대로 살려서 하고 싶었지만 방법을 못 찾았다.

거의 다시 뜯어서 새로 작성해서 구현시킨 결과물이다.

아쉽지만 로직을 잘 못 이해한 내 능력이 부족한 탓이니 어쩔 수 없다.

다시 한 번 더 써보면서 복기하고 다른 팀원분들의 코드는 어떻게 짰는지 공부해보며 공공히 해야겠다.

 

다음은 옵셔널 기능 구현-