그래, id는 가져왔어. 이제 어떡할 건데?! - find()

구현 상황

closest(), getAttribute()을 사용하여 영화 카드를 클릭하면 해당 id를 가져오도록 구현하였다.

 

그럼 이제 그 id를 갖고 뭘 해야하냐!

알맞은 방식으로 변환하여 화면에 띄워야 한다.

 

제공된 과제 내용에 따르면

영화 포스터 영화 제목 영화 내용 평점 북마크 추가 버튼

으로 모달창을 구현해야 한다.

 

어제 걷기반에서 배운 find() 메서드를 이용해야 함을 튜터님께 전해들었다👂🏻

 

 

find() 메서드란?

배열에서 조건에 맞는 하나의 내용(요소 혹은 객체)를 찾는 방법이다.

배열 내의 요소가 단일 요소라면 조건과 동일한 요소가 그대로 출력이 되고

배열 내 요소가 객체라면 조건에 부합한 요소를 갖고있는 객체가 객체 형태 그대로 출력된다.

 

📍find 작성법

배열.find((배열내의_요소) => {
	return 조건
})

 

📍예시

const numbers = [1, 2, 3, 4, 5];

const 삼보다큰수하나 = numbers.find((number) => {
	return number > 3
});

console.log(삼보다큰수하나); // 4

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
    평점: 5,
    후기개수: 2997,
    좋아요수: 31352,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
    평점: 5,
    후기개수: 45021,
    좋아요수: 156057,
  },
];

const 상품하나 = products.find((product) => {
  return product.좋아요수 > 100000;
});
console.log(상품하나);

 

 

 

실제 구현

구현해야 할 내용을 단계별로 정리해보자면,

 

📍1. 메인 화면에 있는 영화들의 API를 배열 형태로 가져온다.

📌 fetch 함수로 가져온 결과를 함수 밖에서 전역 변수로 선언하기

 

 

📍2. 클릭한 카드의 영화 id와 메인 API의 영화 id를 비교한다.

      2-1. find 메서드를 활용하여 id가 같은 영화 내용의 객체를 콘솔창에 출력해본다.

📌 find 메서드로 구현하기

const clickModal = postArray.find(function (postArray) {
    return Number(postArray.id) === Number(cardID);
});

 

 

📍3. 출력된 객체에서 필요한 내용만 쏙쏙 골라 모달창에 나타낸다.

📌 1에서 가져온 API를 바탕으로 temp 내용 구성하기

function displayModal(info) {
  temp_modal = `<div data-id="${info.id}" class="modalCard">
         <img id="poster" src="${
           baseImgUrl + info.poster_path
         } class="card-img-top alt="poster">
         <h1>${info.title}</h1>
         <p>${info.overview}</p>
         <h3>평점: ${info.vote_average}<span id="mvaver"></span></h3>
         <span class="close">&times;</span>
         <button class="book">북마크 추가</button>
    </div>`;
    modalSection.innerHTML = temp_modal;
 };

 

 

📍4. find 메서드와 모달창에 나타내는 함수 연결한다.

📌 모달창 클릭 이벤트리스너에 2의 find 메서드와 3의 displayModal 함수를 넣어주기

cardSection.addEventListener("click", function (e) {
  const mvCard = e.target.closest(".mvCard");
  // console.log(mvCard);
  const cardID = mvCard.getAttribute("data-id");
  console.log(cardID);

  const clickModal = postArray.find(function (postArray) {
    return Number(postArray.id) === Number(cardID);
  });
  console.log(clickModal);
  displayModal(clickModal);
});