굴러간다때구르르
153
2019-07-15 13:56:10
1
363

공공데이터 웹에 표출되는부분..?을 어떻게해야하나요


안녕하세요 

공공데이터를 활용해서 

미세먼지데이터를 웹에 뿌려줄려고하고있습니다

html + css + js입니다.


현재 js형태로 api를 사용하고있구요 


일단 


<div class="card-body">
    <script type="text/javascript">
      dustprint(); /* dust.js */		  
    </script>
</div>

이런식으로 dust.js에있는 dustprint함수를 호출했습니다. 

function dustprint() {
	var xhr = new XMLHttpRequest();
	var url = 'http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'; /*URL*/
	var queryParams = '?' + encodeURIComponent('ServiceKey') + '='+'DYg0vmrx%2FCwpcydFm1xXokGBwzGLrmOmXKBzSFxBIQbtpyRcB2V3%2BUI081r7OCy95xyi5SJoYUuzTxTuMeZN1w%3D%3D'; /*Service Key*/
	queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('1'); /*한 페이지 결과 수*/
	queryParams += '&' + encodeURIComponent('stationName') + '=' + encodeURIComponent('문당동'); /*측정소 이름*/
	queryParams += '&' + encodeURIComponent('dataTerm') + '=' + encodeURIComponent('DAILY'); /*요청 데이터기간 (하루 : DAILY, 한달 : MONTH, 3달 : 3MONTH)*/
	queryParams += '&' + encodeURIComponent('ver') + '=' + encodeURIComponent('1.3'); /*버전별 상세 결과 참고문서 참조*/
	queryParams += '&_returnType=json' /*json으로 출력*/
	xhr.open('GET', url + queryParams);
	
	xhr.onreadystatechange = function () {
		if (this.readyState == 4) {
			alert('Status: '+this.status+' Headers: '+JSON.stringify(this.getAllResponseHeaders())+' Body: '+this.responseText);
		}
  	};
  
 	xhr.send('');
  }


그리고 알람창만뜨고 따로 데이터 같은건 나오지않더라고요..


Access to XMLHttpRequest at 'http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty?ServiceKey='서비스키 url'&numOfRows=1&stationName=%EB%AC%B8%EB%8B%B9%EB%8F%99&dataTerm=DAILY&ver=1.3&_returnType=json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


이런식으로 콘솔창에 뜨긴하는데 링크를 클릭하면 json파일이 보이긴합니다

데이터도 정상적으로 보이구요 xml방식으로해도 데이터가 보이긴합니다.


이제 이 데이터를 어떻게하면 html페이지에 표출이 가능할까요..?


공공데이터 html페이지에 올리는 예시가 별로 없어서 잘 모르겟네요..ㅠㅠ


도와주시면 감사하겠습니다.

0
0
  • 답변 1

  • 커피랑
    133
    2019-07-17 11:24:32

    json 파싱에 대해 알아보시면 될거 같습니다.

    파싱을 통해 표출하고싶은 데이터를 뽑아내 화면에 표출시키면 될거 같아요.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.