CORS-Anywhere
CORS-Anywhere같은 CORS라이브러리를 사용한다면,
간단하게 공공데이터와 같은 외부데이터를 불러올 수 있다.
https://github.com/Rob--W/cors-anywhere
소스코드
정부기관에서 배포하고 있는 공공데이터(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
'웹개발 자료실 > 데이터 개발 자바스크립트 Code' 카테고리의 다른 글
「tip」공공데이터API CORS 연결하기 (2) | 2021.06.04 |
---|---|
「tip」 csv 공공데이터 파일을 json파일로 변환하기 (0) | 2021.06.03 |
댓글