본문 바로가기

「tip」xml-json변환하기 [CORS-Anywhere]

by Recstasy 2021. 6. 5.

CORS-Anywhere

 

CORS-Anywhere같은 CORS라이브러리를 사용한다면,

간단하게 공공데이터와 같은 외부데이터를 불러올 수 있다.

 

https://github.com/Rob--W/cors-anywhere

 

Rob--W/cors-anywhere

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request. - Rob--W/cors-anywhere

github.com

 

 

 

소스코드

 

정부기관에서 배포하고 있는 공공데이터(xml파일)는 Cors-Anywhere + ajax조합으로 간편하게 가져올 수 있다.

 

<script src="https://tistory1.daumcdn.net/tistory/2784544/skin/images/xmltojsonPast.min.js"></script>
<script> 
     const governData = "http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcLandTrade?LAWD_CD=11110&DEAL_YMD=201512&serviceKey=92fOjG0i34%2B%2FcnKSh%2FUjvxl0QyeNIGbNxsd%2BgmE3xnMpSoyChVkq%2FBoZKgx%2FUR8uaABNhgwyOZGBK34js%2FPNiQ%3D%3D";
    

        function convertToCorsUrl(url) { //Cors-Anywhere형식의 url생성
            var protocol = (window.location.protocol === 'http:' ? 'http:' : 'https:');
            return protocol + '//cors-anywhere.herokuapp.com/' + url;
        }

        function transform(xmlEl,jsonEl) { //xml파일 받아서 json으로 변환하기, xmltoJson라이브러리 활용
            let input = document.getElementById(xmlEl).value;
            let jsonCvt = xmlToJson.parse(input);
            document.getElementById(jsonEl).innerHTML = '<pre>' + JSON.stringify(jsonCvt, null, 4) + '</pre>';
        }
        
        function getData(el){
        	 let url = convertToCorsUrl(governData); //공공기관 데이터 넣기
        	   $.ajax({
                url: url,
                method: 'GET',
                dataType: 'text',
                success: function (xml) {
                    document.getElementById(el).value = xml;
                }
            });
        }

     </script>
</p>
<p><textarea id="xmlTxt" name="xmlTxt"></textarea></p>
<div>
	<button onclick="getData('xmlTxt')"> 버튼(데이터 받기) </button></br>
    <button onclick="transform('xmlTxt','jsonTxt')"> 버튼(json변환) </button>
</div>

 

위에서 사용한 xmltoJson CDN은 아래와 같다.

<script src="https://tistory1.daumcdn.net/tistory/2784544/skin/images/xmltojsonPast.min.js"></script>

 

 

 

 

실행

위의 코드를 실행해보자.

xml파일을 직접 textarea에 넣고, json변환 버튼을 클릭하거나

견본데이터를 받아서 변환할 수 있다.  

 

Transformed JSON

 

 

 

댓글

최신글 전체

이미지
제목
글쓴이
등록일