【JavaScript】fetch로 영화의 포스터를 표시시킨다! ! ! !
소개
Qiita 첫 투고입니다. 안녕하세요. 잘 부탁드립니다.
이 기사에서는 TMDb이라는 사이트의 API를 사용하여 영화 포스터를 표시합니다.
TMDb에서는 회원 등록을 하면 API 전송에 필요한 API 키를 부여해 줍니다.
회원등록
회원 등록은 이쪽
로그인하고 메뉴 화면에서 [설정]을 선택합니다.
사이드 메뉴에서 [API]를 선택하고 아래로 스크롤하면 [API 키 요청]이 있으므로 API 키를 요청하십시오.
절차에 따라 API 키를 요청하면 이전에 API 키 요청이 표시되었을 때 API 키(v3 auth)가 표시됩니다.
그쪽을 복사하십시오.
그건 그렇고, 'API 요청'단계에서 개인 정보와 앱 정보를 들었지만 제대로 작성했습니다. 적당히 써도 API 키는 받을 수 있습니다.
먼저 fetchAPI에서 필요한 것을 변수에 저장합니다.
main.js
let Apikey = "your API key"; //あなたのAPIキーを記入してください。
API 요청의 예에 URL이 쓰여 있으므로, 마루마루코피페 해 보겠습니다.
JS
fetchAPI는 이러한 구문으로 쓸 수 있는 것 같기 때문에, 이것에 URL을 메워 보겠습니다.
main.js
fetch(URL)
.then(res => {
console.log(res.status);
})
.catch(error => {
console.log(error);
});
main.js
fetch(`https://api.themoviedb.org/3/movie/76341?api_key=${Apikey}`)
.then(res => {
console.log(res.status);
}).catch(error => {
console.error(error);
});
브라우저에서 열고 콘솔 화면을 열어 보면 ....?
성공했습니다! !
이제 이 정보를 사용하여 JSON으로 포맷된 정보를 콘솔 화면에 표시해 보겠습니다.
main.js
fetch(`https://api.themoviedb.org/3/movie/76341?api_key=${Apikey}`)
.then(res => {
// console.log(res.status);
res.json().then(movie => {
console.log(movie);
});
})
.catch(error => {
console.error(error);
});
영화 정보가 표시됩니다! ! !
매드 맥스였습니다! !
그런데, 다음은 이 데이터를 페이지에 표시시켜 보겠습니다.
main.js
fetch(`https://api.themoviedb.org/3/movie/76341?api_key=${Apikey}`)
.then(res => {
// console.log(res.data)
res.json().then(movie => {
console.log(movie);
const container = document.getElementById("container");
const movie_card = `
<div id="card" class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
<h4>${movie.title}</h4>
<img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" alt="">
<p>${movie.overview}</p>
</div>
`;
container.innerHTML = movie_card;
});
}).catch(error => {
console.error(error);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TMDb</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="./main.js"></script>
</body>
</html>
이제 표시됩니다.
요약
첫 투고인 것 같은 얇은 기사가 되었습니다.
다음에 검색 기능을 붙인 것도 조금 내용이 짙은 것을 만들고 싶습니다.
Reference
이 문제에 관하여(【JavaScript】fetch로 영화의 포스터를 표시시킨다! ! ! !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/lopstn8395/items/cf270ed2f825ef971bea텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
