팀과제 중 상세페이지 를 맡게 되었고
localStorage 를 사용 하여 detail 버튼을 눌렀을때 해당 영화에 상세페이지가 열리면 된다.
우선 아주 간단해보이는데 나에겐 너무 머리가 아프다..
내가 정한 방법은 해당 영화 카드에 있는 detail 버튼을 눌렀을때
그 영화의 id값을 가져오는 것이고,
그 영화 id값과 전체 영화 id값과 비교하여 일치하는 값이 있다면
일치하는 id값의 영화정보만 불러오는 것이다!!
그러기 위해 detail 버튼을 눌렀을때 id값을 localStorage에 담아 와야한다.
function clickAllChart({ target }) {
if (target.matches(".details")) {
// alert(`영화 ID : ${target.id}`);
window.localStorage.setItem("movieid",`${target.id}`);
window.open('detail.html')
}
}
해당 코드를 이용해 detail이라는 버튼 target을 눌렀을때 해당 영화 id값이 뜨는지 alert로 띄었을때 성공하였고
그걸 localStorage.setItem을 통해 movieid라는 변수에 담아오면서 detail.html을 여는 방식으로 하였다.
detail.html이 열리는거 까진 성공했다.
그리고 id값이 잘 가져와지는지 확인해봐야한다.
const id = window.localStorage.getItem("movieid")
console.log(id)
detail.js 에서 해당 코드를 통해 console 창을 확인해보니 id값이 잘 가져와진다!
수월하게 잘 풀리는 기분이다 후훗..
이제 가져온 id값과 전체 영화 id값을 비교해주면 된다!
function detail() {
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5MTE5ZjU0OTI3NWEyM2VjNjViNTRkZmQ2MTUyYTA4NiIsInN1YiI6IjY0NzA4YTllNzcwNzAwMDBhOTQ3ZDdmMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.3W-E9KnuKEWvia4zXrXpCRKfHz9a5clH7RjrUwJD8iY'
}
};
fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
.then(response => response.json())
.then(data => {
let rows = data['results']
rows.forEach((a) => {
// console.log(a['id'])
if (a['id'] === parseInt(id)) {
console.log("true")
}
else {
"false"
}
영화 목록이 총 20개 이고 일치하는게 있다면 true를 나타내고, 일치하지않는다면 false를 나타낸다!
console 창을 확인해보니 false가 20개이다..
뭐가 문제인가..
주석 처리 되어있는 console.log(a['id']) 를 했을때는 20개의 영화 목록이 정상적으로 나온다.
그렇다면 여기서 문제는
if (a['id'] === id)
여기서 내가 가져온 setItem으로 가져온 id값이 정상적이지 않다는 건데..
뭐가 문제인가 계속해서 찾아봤지만 알 수가 없었다.. 그래서 팀원에게 물어본 결과
영화 자체의id값은 type이 number 이고 localStorage.setItem으로 가져온 type은 string 이라는 거다..
내가 === 을 사용해서 타입과 모든게 일치해야 해서 true가 나오지 않다는 것..
== 을 사용하면 true 가 1개 정상적으로 찍혔고
if (a['id'] === parseInt(id))
이런 식으로 타입을 number로 바꿔주니 true가 잘 찍힌다..
머리가 지끈하니 다음시간에 더 진행해보자 ㅠㅠ
'긁적..' 카테고리의 다른 글
home 버튼 / prev,next 버튼 ( 해결 ) (0) | 2023.06.08 |
---|---|
home 버튼 / prev,next 버튼 (1) | 2023.06.07 |
[1] Team.NIVEA 회고 (1) | 2023.05.19 |
for반복문 증감식 (0) | 2023.05.19 |
동기 와 비동기 (0) | 2023.05.19 |