<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일별박스오피스 - 영화진흥위원회</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<!--
■ 영화진흥위원회 : 일별 박스 오피스
http://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do
http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.xml (XML)
http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json (JSON)
key : (발급키)
targetDt : (날짜yyyyMMdd)
multiMovieYn : 영화구분, "Y" : 다양성 영화 "N" : 상업영화 (default : 전체)
repNationCd : 국내국외영화구분, "K": 한국영화 "F" : 외국영화 (default : 전체)
itemPerPage : 결과 row 의 개수 (default : "10", 최대 : "10")
샘플 기본 url
XML 버젼
http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.xml?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101
JSON 버젼
http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101
↑ 위 기본 url 에 더하여 '영화구분', '국내국외영화구분' '출력ROW' 가 반영된 검색결과가 표시되어야 합니다
-->
<body>
<h1>일별박스오피스</h1>
<form name="frm">
날짜: <input type="date" id="stdr_de_id" value="2021-02-02" placeholder="연도-월-일" /><br>
영화구분:
<select id="multiMovieYn">
<option value="">전체</option>
<option value="Y">다양성 영화</option>
<option value="N">상업영화</option>
</select><br>
국내국외영화구분:
<select id="repNationCd">
<option value="">전체</option>
<option value="K">한국영화</option>
<option value="F">외국영화</option>
</select><br>
출력ROW: <input type="number" id="itemPerPage" min="1" max="10" value="10" /><br>
<br><br>
<button type="button" onclick="loadData()">정보 가져오기</button>
<button type="button" onclick="removeTable()">지우기</button>
</form>
<hr>
<h2>검색결과</h2>
<table id="demoJSON">
<thead>
<tr>
<th>순위</th>
<th>영화명</th>
<th>누적관객수</th>
<th>전일대비순위증감</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const api_key = api_key; //여기 api key 입력하세요
const req_url = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json";
function removeTable() {
let tableBody = document.querySelector("#demoJSON tbody");
tableBody.innerHTML = "";
}
function loadData() {
const date = document.getElementById("stdr_de_id").value.replace(/-/g, '');
const multiMovieYn = document.getElementById("multiMovieYn").value;
const repNationCd = document.getElementById("repNationCd").value;
const itemPerPage = document.getElementById("itemPerPage").value;
if (!date || date.length !== 8) {
alert("날짜포맷이 맞지 않습니다.");
return;
}
const rowValue = parseInt(itemPerPage, 10);
if (isNaN(rowValue) || rowValue < 1 || rowValue > 10) {
alert("출력ROW는 1~10 사이의 정수이어야 합니다.");
return;
}
const url = `${req_url}?key=${api_key}&targetDt=${date}&multiMovieYn=${multiMovieYn}&repNationCd=${repNationCd}&itemPerPage=${rowValue}`;
fetch(url)
.then(response => response.json())
.then(jsonObj => { parseJson(jsonObj) });
}
function parseJson(jsonObj) {
const boxOfficeList = jsonObj.boxOfficeResult.dailyBoxOfficeList;
let tableBody = document.querySelector("#demoJSON tbody");
tableBody.innerHTML = "";
boxOfficeList.forEach(movie => {
let row = `<tr>
<td>${movie.rank}</td>
<td>${movie.movieNm}</td>
<td>${movie.audiAcc}</td>
<td>${movie.rankInten}</td>
</tr>`;
tableBody.innerHTML += row;
});
}
</script>
</body>
</html>
Junior Backend Developer