[JavaScript] jQuery - 오픈 API로 일별 박스오피스 불러오기
- WEB
- 2021. 7. 3.
영화진흥위원회는 박스오피스, 영화사, 영화인, 영화 등의 실시간 정보를 OPEN API로 제공한다.
이를 활용해 날짜를 선택하면 해당 날짜의 박스오피스 순위와 누적 관람객 수를 화면에 보여주는 실습을 진행해 보자.
이렇게 날짜를 선택하면
해당 날짜의 누적 관람객 기준 1위부터 10위까지 영화 순위를 출력한다.
API 이용을 위해선 회원가입 후 고유 키를 발급받아야 하는 것이 일반적이지만 일부 기능은 그런 절차 없이도 이용할 수 있다. 이번 포스팅에서 구현하는 기능은 회원가입 절차가 필요하지 않다.
영화진흥위원회 OPEN API 사이트 - OPEN API - 일별 박스오피스에 접속한다.
REST 방식을 사용한다. XML과 JSON을 모두 지원하는데 JSON을 활용한다. 참고로 XML과 JSON은 데이터를 저장하는 형태가 다르다. 문서를 직접 보면 알 수 있는데, XML의 경우 중복된 단어가 지속적으로 포함된다. 같은 양의 정보를 담는다고 할 때 XML의 경우 더 많은 텍스트가 필요하다. 이런 이유로 통상 JSON을 사용하는 추세인 듯하다.
JSON의 데이터 형태다. object안에 키와 값으로 데이터가 저장되고 그 안에서 또다시 배열이 생겨나는 식으로 구성된다. 이중 원하는 값을 잘 가져오는 게 핵심이다.
다시 본론으로 돌아와서, 화면에 달력으로 날짜를 선택할 수 있도록 HTML 코드를 작성해 주는 작업을 진행한다.
<body>
<input type="date" id="date"><button id="mybtn">확인</button>
<div id="boxoffice">
박스 오피스 순위<br>
</div>
</body>이제 jQuery를 사용할 수 있도록 스크립트를 추가해주고 본격적으로 코딩을 진행한다. 자바스크립트가 제공하는 Date 객체를 만들고 JSON 형태에 맞게 날짜 형식을 만들어주는 작업을 먼저 해준다.
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
let y = new Date();
y.setDate(y.getDate()-1);
let str = y.getFullYear() + "-"
+ ("0" + (y.getMonth() + 1)).slice(-2) + "-"
+ ("0" + y.getDate()).slice(-2);
$("#date").attr("max",str);
</script>이제 확인 버튼을 클릭하는 이벤트가 발생하면 API를 통해 정보를 가져오고 이를 화면에 뿌려주는 작업을 진행한다.
$("#mybtn").click(function() {
let d = $("#date").val(); //YYYY-MM-DD
const regex = /-/g;
let d_str = d.replace(regex,"") // YYYYMMDD
let url = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt="+d_str
// ajax로 json 데이터 가져오기
$.getJSON(url, function(data) {
let movieList = data.boxOfficeResult.dailyBoxOfficeList;
$("div").empty(); // 두 번 클릭했을 때 기존 내용을 지워줌
$("div").append(d+" 박스 오피스 순위<br>");
for(let i in movieList){
$("div").append("<span id= '"+movieList[i].movieCd + "'>" +(parseInt(i)+1) + " " + movieList[i].movieNm+"/"+movieList[i].audiAcc + "명 " + "</span><hr>" );
} //
});
});//clicklet d = $("#date").val();: 선택한 날짜의 값(val)을 YYYY-MM-DD 형태로 받아옴const regex = /-/g; let d_str = d.replace(regex,""): 정규표현식을 통해-를 제거함. 그리고 이를d_str에 담음let url = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt="+d_str: 응답 방식.&targetDt="+d_str를 덧붙여서 해당 날짜의 정보를 가져온다는 의미
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일별 박스오피스</title>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
let y = new Date();
y.setDate(y.getDate()-1);
let str = y.getFullYear() + "-"
+ ("0" + (y.getMonth() + 1)).slice(-2) + "-"
+ ("0" + y.getDate()).slice(-2);
$("#date").attr("max",str);
// 버튼 클릭 이벤트
$("#mybtn").click(function() {
let d = $("#date").val(); //YYYY-MM-DD
const regex = /-/g;
let d_str = d.replace(regex,"") // YYYYMMDD
let url = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt="+d_str
$.getJSON(url, function(data) {
let movieList = data.boxOfficeResult.dailyBoxOfficeList;
$("div").empty();
$("div").append(d+" 박스 오피스 순위<br>");
for(let i in movieList){
$("div").append("<span id= '"+movieList[i].movieCd + "'>" +(parseInt(i)+1) + " " + movieList[i].movieNm+"/"+movieList[i].audiAcc + "명 " + "</span><hr>" );
}
});
});//click
});//ready
</script>
</head>
<body>
<input type="date" id="date"><button id="mybtn">확인</button>
<div id="boxoffice">
박스 오피스 순위<br>
</div>
</body>
</html>
'WEB' 카테고리의 다른 글
| [JavaScript] jQuery - XML 파일, 특정 노드값으로 다른 노드값 찾는법 (0) | 2021.07.15 |
|---|---|
| [JavaScript] jQuery - 오픈 API로 일별 박스오피스 불러오기(2) (0) | 2021.07.05 |
| [JavaScript] jQuery - each() 메서드 | 반복해서 요소에 접근 (0) | 2021.07.01 |
| [JavaScript] 원하는 HTML 요소(Element) 찾아가는 방법 (0) | 2021.06.29 |
| [JavaScript] 카카오 우편번호 API 간단하게 적용하기 (0) | 2021.06.28 |