▷ 영화진흥위원회 오픈API를 사용하여 영화 상세정보 데이터를 가져와서 파싱하기
clone_test8_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type: "get",
url: "https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=e7340032dd56a5699df512d551a3f5c8&targetDt=20220311",
dataType: "json"
})
.done(function(data) {
$('#resultArea').html('<table border="1">' // 출력 테이블
+ '<th width="100">현재순위(rank)</th><th width="400">영화명(movieNm)</th><th width="150">개봉일(openDt)</th><th width="100">누적관객수(audiAcc)</th>'
+ '</table>');
// 영화 일별 박스오피스 정보 전체를 "파싱"하여 각 데이터를 추출하기
// 1. 전체 조회 결과에 해당하는 "boxOfficeResult" 추출
// => 최상위 객체의 키이므로 data 객체(변수)를 통해 바로 접근
var boxOfficeResult = data.boxOfficeResult; // "boxOfficeResult" 속성에 해당하는 값 추출됨
// 2. "boxOfficeResult" 내의 "boxofficeType", "showRange" 추출
var boxofficeType = boxOfficeResult.boxofficeType;
var showRange = boxOfficeResult.showRange;
// 3. "boxOfficeResult" 내의 박스오피스 영화 목록("dailyBoxOfficeList") 객체 추출
var dailyBoxOfficeList = boxOfficeResult.dailyBoxOfficeList;
// 4. "dailyBoxOfficeList" 내의 각 영화 정보 객체 추출 => 배열 내에 각 객체가 저장되어 있음
// => dailyBoxOffice 객체에는 1개 영화 정보가 저장되어 있음(각 영화 속성에 접근 가능함)
// for...of 문을 사용하여 배열 반복 시
for(var dailyBoxOffice of dailyBoxOfficeList) {
// 각 정보를 변수에 저장
var rank = dailyBoxOffice.rank;
var movieNm = dailyBoxOffice.movieNm;
var openDt = dailyBoxOffice.openDt;
var audiAcc = dailyBoxOffice.audiAcc;
// 영화 상세정보 조회에 필요한 영화코드(movieCd) 추출
var movieCd = dailyBoxOffice.movieCd;
// 영화 제목을 클릭하면 영화코드값을 사용하여 test8_json_movie_detail.jsp 페이지로 이동(영화 상세정보 조회 후 출력)
$('#resultArea > table').append(
'<tr>'
+ '<td>' + rank + '</td>'
+ '<td>' + '<a href="./clone_test8_json_movie_detail.jsp?movieCd=' + movieCd + '">' + movieNm + '</a>' + '</td>'
+ '<td>' + openDt + '</td>'
+ '<td>' + audiAcc + '명</td>'
+ '</tr>'
);
}
})
.fail(function() {
$('#resultArea').html('<h3>JSON 요청 실패!</h3>');
});
});
</script>
</head>
<body>
<h1>clone_test8_json.jsp</h1>
<div id="resultArea"></div>
</body>
</html>앞의 JSON (3)과 같이 2022년 3월 11일 기준 일별 박스오피스 데이터 추출
clone_test8_json_movie_detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
// URL 로 전달받은 영화코드 movieCd 파라미터 가져오기
var movieCd = ${param.movieCd};
// 영화 상세정보 링크 생성 => 파라미터 : movieCd
var movieDetailUrl = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json?key=e7340032dd56a5699df512d551a3f5c&movieCd=' + movieCd;
$.ajax({
type: "get",
url: movieDetailUrl,
dataType: "json"
})
.done(function(data) {
// 영화제목(국문<movieNm>과 영문<movieNmEn>), 출연진<actor - peopleNm> 출력
var movieInfo = data.movieInfoResult.movieInfo;
$('#resultArea').append('영화명 : ' + movieInfo.movieNm + '(' + movieInfo.movieNmEn + ')<br>');
$('#resultArea').append('감독 : ' + movieInfo.directors[0].peopleNm + '(' + movieInfo.directors[0].peopleNmEn + ')<br>');
$('#resultArea').append('출연진 : ');
// $('#resultArea').append(movieInfo.actors[0].peopleNm + '(' + movieInfo.actors[0].peopleNmEn + ') ');
// alert(actors);
for(var actor of movieInfo.actors) { // 여러명의 배우일 경우 모든 정보에 접근하기 위해 반복문 활용
// $('#resultArea').append(actor.peopleNm + '(' + actor.peopleNmEn + ') ');
// 만약, 배우 이름 클릭 시 배우에 대한 상세 정보를 조회하는 경우
var movieActorDetailUrl = 'http://kobis.or.kr/kobisopenapi/webservice/rest/people/searchPeopleList.json?key=f5eef3421c602c6cb7ea224104795888&peopleNm=' + actor.peopleNm;
$('#resultArea').append('<a href="' + movieActorDetailUrl + '">' + actor.peopleNm + '(' + actor.peopleNmEn + ')</a> ');
}
})
.fail(function() {
$('#resultArea').html('<h3>JSON 요청 실패!</h3>');
});
});
</script>
</head>
<body>
<h1>clone_test8_json_movie_detail.jsp - 영화 상세정보</h1>
<div id="resultArea"></div>
</body>
</html>영화마다 하이퍼링크를 사용하여 영화의 상세정보를 조회할 수 있음
출력 결과
'JSP' 카테고리의 다른 글
| Spring (1) - 설치 및 세팅(한글 깨짐) (0) | 2022.03.14 |
|---|---|
| JSON - 왜 안될까?(일별 박스오피스 -> 영화 상세보기 -> 배우 상세보기) (0) | 2022.03.12 |
| JSON (3) - 박스오피스 데이터 가져오기[영화진흥위원회 오픈API] (0) | 2022.03.12 |
| JSON (2) - .txt 파일 데이터 가져오기 (0) | 2022.03.12 |
| JSON (1) - 기본 사용법 (0) | 2022.03.12 |
