JavaScript로 Open API 데이터 가져오기 (영화진흥위원회, 서울 열린데이터 광장)

이전에 본격적으로 데이터를 크롤링해보겠다고 했는데, Open API를 통해 데이터를 가져와 표로 만들어 보았다.

Open API를 제공하는 곳은 많지만, 일단, 공공데이터를 가져와보았다.

 

서울열린데이터광장 (http://data.seoul.go.kr/dataList/OA-15379/S/1/datasetView.do;jsessionid=CDCA37159B8070A2849DD98463BA53EB.new_portal-svr-11)

 

보통 xml과 json으로 openAPI를 제공한다

인증키 값을 발급받아서 위 API에 key값을 넣으면 아래와 같은 내용을 볼 수 있다. 아래 노란색 박스를 보면 어떤 요소를 타고 데이터를 가져와야 하는지 그 구조를 알 수 있다. (json과 xml은 약간의 차이가 있지만 비슷하다.)

 

xml open API (서울 열린데이터 광장)

json open API (서울 열린데이터 광장)

이러한 데이터들을 이제 본격적으로 JavaScript를 이용해서 가져와볼텐데, xml은 위의 서울 열린데이터 광장에서, json은 영화진흥위원회에서 가져와보겠다.

HTML이나 CSS로 구조를 만드는 것은 기본적인 모습으로 만들었기 때문에 Script 부분만 보겠다.

 

	<script>
		var api_key = // Open API 키값

		function removeTable() {
			document.getElementById('demoXML').removeChild(document.getElementById('demoXML').childNodes[0]);
			document.getElementById('demoJSON').removeChild(document.getElementById('demoJSON').childNodes[0]);
		}

		function loadData() {

			var stdr_de_id = document.getElementById("stdr_de_id").value.trim();
			var start_index = document.getElementById("start_index").value.trim();
			var end_index = document.getElementById("end_index").value.trim();
			stdr_de_id = stdr_de_id.replace(/-/g, '');

			// XML
			var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/SPOP_DAILYSUM_JACHI/" + start_index + "/" +
				end_index + "/" + stdr_de_id;

			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) { 
					parseXML(this.responseXML); 
				}
			};
			xhttp.open("GET", url, true);
			xhttp.send();

			
		function parseXML(xmlDOM) {
			var i;

			var table = "<tr><th>날짜</th><th>구ID</th><th>총 생활 인구수</th><th>일 최대 이동 인구수</th></tr>";
			var row = xmlDOM.getElementsByTagName("row");
			for (i = 0; i < row.length; i++) {
				table += "<tr>";
				table += "<td>" + row[i].getElementsByTagName("STDR_DE_ID")[0].childNodes[0].nodeValue + "</td>";
				table += "<td>" + row[i].getElementsByTagName("SIGNGU_CODE_SE")[0].childNodes[0].nodeValue + "</td>";
				table += "<td>" + row[i].getElementsByTagName("TOT_LVPOP_CO")[0].childNodes[0].nodeValue + "</td>";
				table += "<td>" + row[i].getElementsByTagName("DAIL_MXMM_MVMN_LVPOP_CO")[0].childNodes[0].nodeValue + "</td>";
				table += "</tr>";
			} // end for
			document.getElementById("demoXML").innerHTML = table;
		}
       	</script>

 

xml은 document.getElementById("id명").+ 이 구조를 잘 쓰면 어렵지 않게 데이터를 가져올 수 있고,

 

<script>
		var api_key = // 내 키값
		var req_url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json";

		function removeTable() {
			//document.getElementById('demoXML').removeChild(document.getElementById('demoXML').childNodes[0]);
			document.getElementById('demoJSON').removeChild(document.getElementById('demoJSON').childNodes[0]);
		}

		function loadData() {
        
			var movieNm = document.getElementById('movieNm').value.trim();
			var openStartDt = document.getElementById('openStartDt').value.trim();
			var itemPerPage = document.getElementById('itemPerPage').value.trim();
			var curPage = document.getElementById('curPage').value.trim();
			movieNm = encodeURI(movieNm);

			// 유효성 검사
			var form = document.forms['frm'];

			if (form['movieNm'].value.trim() == "") {
				alert("영화명을 반드시 입력해야 합니다.")
				form['movieNm'].focus();
				return;
			}

			var numPat = /[1-2][0-9]{3}/;
			if (!numPat.test(form['openStartDt'].value.trim())) {
				alert("유효한 날짜포맷이 아닙니다.");
				form['openStartDt'].focus();
				return;
			}

			var rowNum = form['itemPerPage'].value.trim();
			if (rowNum < 0 || rowNum > 10) {
				alert("출력ROW는 1과 10사이의 정수여야 합니다.")
				form['itemPerPage'].focus();
				return;
			}

			var pageNum = form['curPage'].value.trim();
			if (pageNum < 1) {
				alert("페이지 번호는 1 이상의 정수여야 합니다.")
				form['itemPerPage'].focus();
				return;
			}

			// JSON
			var url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=" + api_key +
				"&movieNm=" +
				movieNm + "&openStartDt=" + openStartDt + "&itemPerPage=" + itemPerPage + "&curPage=" + curPage;

			xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) { // this 는 XMLHttpRequest 객체다 
					parseJSON(this.responseText);
				}

			};

			xhttp.open("GET", url, true);
			xhttp.send();
		}

		function parseJSON(jsonText) {
			var jsonObj = JSON.parse(jsonText);

			var movie = jsonObj.movieListResult.movieList;
			var i;

			var table = "<tr><th>영화명</th><th>개봉일</th><th>감독(들)</th><th>제작사(들)</th></tr>";
			for (i = 0; i < movie.length; i++) {
				table += "<tr>";
				table += "<td>" + movie[i].movieNm + "</td>";
				table += "<td>" + movie[i].movieCd + "</td>";
				if (movie[i].directors[0] == null) {
					table += "<td>" + "</td>";
				} else {
					var peopleNames = "";
					for (j = 0; j < movie[i].directors.length; j++) {
						peopleNames += movie[i].directors[j].peopleNm + "<br>";
					}
					table += "<td>" + peopleNames + "</td>";
				}
				if (movie[i].companys[0] == null) {
					table += "<td>" + "</td>";
				} else {
					var companyNames = "";
					for (j = 0; j < movie[i].companys.length; j++) {
						companyNames += movie[i].companys[j].companyNm + "<br>";
					}
					table += "<td>" + companyNames + "</td>";
				}
				table += "</tr>";
			} // end for

			document.getElementById("demoJSON").innerHTML = table;
		}
	</script>

 

json에서는 Object인지 Array인지만 잘 파악해서 갖고 오고 싶은 정보를 가져오면 된다.

결과적으로는

 

이런 테이블 형태로 데이터를 가져올 수 있다.