인강을 들으면서 ReactJS로 Movie App을 만들었었다. 그때는 데이터를 받기 위해서 fetch라는 걸 썼었는데 지금 만들고 있는 포트폴리오 사이트와 연동해서 브라우저에 올리기 위해서는 따로 JavaScript Ajax를 이용해야 했기때문에 방법을 더 찾아봤다.
https://yts.mx/api#list_movies
API Documentation - YTS YIFY
Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details.
yts.mx
영화 목록은 여기서 받아왔다.
아래로 내려가다 보면 URL이 두 개 나와있는데, 여기서 다음 표를 참고하여 정렬 기준을 바꿔서 데이터를 받아볼 것이다.
https://yts.mx/api/v2/list_movies.json?sort_by=download_count
다운로드 횟수가 많은 순으로 정보를 받기 위해서 sort_by=download_count 쿼리를 입력했다.
해당 주소로 들어가면 JSON 데이터들을 확인할 수 있다.
JSON VIEWER라는 구글 확장 프로그램덕분에 깔끔하게 보인다 :D
이제 이 주소를 가지고 데이터를 정렬하여 받아와보자.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$.ajax({
url: "https://yts.mx/api/v2/list_movies.json?sort_by=download_count",
type: "GET",
success: function(data) {
$('#content').html(JSON.stringify(data));
}
})
})
</script>
</head>
<body>
<p id="content"></p>
</body>
</html>
실행하게 되면 데이터들을 잘 받아와 표시한다. 간단하게 성공!
이제 이 데이터들 중 원하는 데이터들만 활용하여 필요한 곳에 쓰면 된다.
'프론트 개발 > javascript' 카테고리의 다른 글
| jQuery 선택자를 이용해서 DOM 요소를 선택할 때 주의점 (0) | 2024.03.29 |
|---|---|
| [javascript] 클립보드 제어하기 + 예제 (0) | 2023.12.14 |
| [javascript] Array.reduce() + 예제 (0) | 2023.12.13 |
| [JavaScript] Ajax (0) | 2020.02.19 |
