Spring - 0705 Json

Teasic KIM·2023년 7월 5일

Spring

목록 보기

4/8

Json 의 가독성을 편하게 하기 위해 웹스토어에서 Viewer 추가

test_json.jsp

</head>
<body>
	<h1>test5_json_movie_list.jsp - 일별 박스오피스</h1>
	<input type="date" id="date">
	<input type="button" value="일별 박스오피스 조회" id="btnOk">
	<div id="resultArea">
		<table border="1">
			<tr>
				<th width="80">현재순위</th>
				<th width="400">영화명</th>
				<th width="150">개봉일</th>
				<th width="100">누적관객수</th>
				<th></th>
			</tr>
		</table>
	</div>
</body>
</html>

우리의 목표는 영화 오픈 API를 이용한 영화정보를 jsp에 출력하는 것이다.

https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do?serviceId=searchDailyBoxOffice
여기서 영화 정보를 얻을 수 있는 오픈API를 이용해보자
해당 주소를 클릭하면

이렇게 Json 으로 적힌 데이터들을 확인 할 수 있다
이제 Ajax로 Json 의 정보를 얻을 코드를 작성해보자

test_json.js

<script src="../js/jquery-3.7.0.js"></script>
<script type="text/javascript">
	$(function() {
		$("#btnOk").on("click", function() {
			let url = "https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json";
			let key = "f5eef3421c602c6cb7ea224104795888";
			// 영화 상세 정보 조회 요청에 사용될 URL 지정
			let detailUrl = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json";
			// 조회일자를 캘린더에서 선택할 경우(미선택 시 "", 선택 시 yyyy-mm-dd)
			let selectedDate = $("#date").val(); // 2023-07-04		
			// 날짜 미선택 시 캘린더에 포커스 주기(포커스 요청 후 함수 실행 종료)
			if(selectedDate == "") {
				alert("날짜 선택 필수!");
				$("#date").focus();
				return; // 요청이 진행되지 않도록 함수 실행 종료
			}
			// 선택된 날짜를 파라미터(문자열)로 사용하여 Date 객체 생성
			let objDate = new Date(selectedDate);
			
			//  replace() 메서드의 정규표현식 기능을 활용하여 치환
			let targetDt = selectedDate.replace(/-/g, ""); // 한 라인의 모든 "-" 제거
			$.ajax({
				type: "GET",
				url: url + "?key=" + key + "&targetDt=" + targetDt,
				dataType: "json",
				success: function(data) { // 요청 성공 시	
					// 1. 박스오피스 목록 전체 데이터가 저장된 "boxOfficeResult" 객체 추출
					let boxOfficeResult = data.boxOfficeResult;
// 					$("#resultArea").html(JSON.stringify(boxOfficeResult));
					
					// 2. 박스오피스 타입(boxofficeType), 조회날짜(showRange) 추출
					let boxOfficeType = boxOfficeResult.boxofficeType;
					let showRange = boxOfficeResult.showRange;
					
					// 3. 일별 박스오피스 목록(dailyBoxOfficeList) 추출
					let dailyBoxOfficeList = boxOfficeResult.dailyBoxOfficeList;
					
					// 4. 추출된 박스오피스 목록(배열)을 반복문을 통해 접근하여
					//    순위(rank), 제목(movieNm), 개봉일(openDt), 누적관객수(audiAcc) 
					//    추출 후 테이블에 추가
					// => 단, 기존 영화 목록 제거 후 새로 추가
					// => 테이블을 미리 생성해두었으므로 영화목록만 제거
					$(".movieItem").remove();
					
					for(let movie of dailyBoxOfficeList) {
						$("#resultArea > table").append(
							"<tr class='movieItem'>"
							+ "<td>" + movie.rank + "</td>"
							+ "<td>" + movie.movieNm + "</td>"
							+ "<td>" + movie.openDt + "</td>"
							+ "<td>" + movie.audiAcc + "</td>"
							+ "<td><input type='button' value='상세정보' onclick=''></td>"
							+ "</tr>"
					);
				}
				},
				error: function() { // 요청 실패 시
					$("#resultArea").html("<h1>요청 실패!</h1>");
				}
			});
			
		}); // 버튼 이벤트 끝
		
	});
</script>

	$(function() {
		$("#btnOK").on("click", function() { 
        	let url = "kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json";
			let key = "f5eef3421c602c6cb7ea224104795888";
			let detailUrl = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json";
            let selectedDate = $("date").val();
            
            let objDate = new Date(selectedDate);
			// 4) replace() 메서드의 정규표현식 기능을 활용하여 치환
			let targetDt = selectedDate.replace(/-/g, "");
}

버튼을 누르면 발생하는 function 코드 설정
url , key, detailUrl, selectedDate 로 구분을 주자
ajax의 url: 에 그대로 주소를 쓰기엔 너무 김
그래서 url , key 객체 생성
selectedDate 를 설정해서 날짜가 바뀌어도 동적으로 값을 들고 올 수 있게 설정

선택된 날짜를 파라미터(문자열)로 사용하여 Date 객체 생성
let objDate = new Date(selectedDate);

replace() 메서드의 정규표현식 기능을 활용하여 치환
let targetDt = selectedDate.replace(/-/g, "");

$.ajax({
	data = "GET",
	url = url + "?key=" + key + "&targetDt=" + targetDt,
	datatype = "json"
	success : function(data) {
		let boxOfficeResult = data.boxOfficeResult;
		let boxOfficeType = boxOfficeResult.boxofficeType;
		let showRange = boxOfficeResult.showRange;
		let dailyBoxOfficeList = boxOfficeResult.dailyBoxOfficeList;
		
		$(".movieItem").remove();
		
		for(let movie of dailyBoxOfficeList) {
			$("#resultArea > table ").append(
			"<tr class = 'movieItem'>"
			+"<th>" + movie.rank + "</th>"
			+"<th>" + movie.movieNm + "</th>"
			+"<th>" + movie.openDt + "</th>"
			+"<th>" + movie.audiAcc + "</th>"
			+ "</tr>"
			)
		}

박스오피스 목록 전체 데이터가 저장된 "boxOfficeResult" 객체 추출
let boxOfficeResult = data.boxOfficeResult;

박스오피스 타입(boxofficeType), 조회날짜(showRange) 추출
=> 1번에서 추출한 boxOfficeResult 객체를 통해 접근
=> 두 데이터는 객체가 아닌 일반 속성이므로 변환 없이도 접근 가능
let boxOfficeType = boxOfficeResult.boxofficeType;
let showRange = boxOfficeResult.showRange;

일별 박스오피스 목록(dailyBoxOfficeList) 추출
=> 복수개의 영화정보 객체{}가 dailyBoxOfficeList 배열[]로 관리됨
=> 단, 배열 내의 데이터도 객체이므로 전체 출력 시 변환 필요
let dailyBoxOfficeList = boxOfficeResult.dailyBoxOfficeList;
추출된 박스오피스 목록(배열)을 반복문을 통해 접근하여
순위(rank), 제목(movieNm), 개봉일(openDt), 누적관객수(audiAcc)
추출 후 테이블에 추가
=> 단, 기존 영화 목록 제거 후 새로 추가

	for(let movie of dailyBoxOfficeList) {
		$("#resultArea > table").append(
			"<tr class='movieItem'>"
			+ "<td>" + movie.rank + "</td>"
			+ "<td>" + movie.movieNm + "</td>"
			+ "<td>" + movie.openDt + "</td>"
			+ "<td>" + movie.audiAcc + "</td>"
			+ "<td><input type='button' value='상세정보' onclick=''></td>"
			+ "</tr>"
	);
}

위와 같이 잘 출력되는걸 확인 할 수 있다.

Teasic KIM

백엔드 개발자 지망생

Spring - 0705 Json

Spring

test_json.jsp

test_json.js

0개의 댓글