[16] JavaScript & JQuery - 서울 미세먼지 API 호출

 

※  자바스크립트 fetch함수 사용

 

1. 서울 공공데이터 api 접속

https://data.seoul.go.kr/dataList/OA-2219/S/1/datasetView.do

열린데이터광장 메인

 

ㄴ 우측 인증키신청을 클릭해서 인증키를 발급받아야한다.

ㄴ 회원가입 후 로그인하면 받을 수 있다.

 

 

 

2. 자바스크립트 코드

let url = "http://openapi.seoul.go.kr:8088/인증키/데이터타입/RealtimeCityAir/1/99";
   fetch(url).then(res => res.json()).then(data => {
})

 

ㄴ 인증키에 발급받은 인증키를 넣어준다.

ㄴ fetch에서 json타입으로 설정해뒀기에 url 데이터타입에 json으로 맞춰준다.

 

 

3. 결과확인 및 가공

console.log(data['RealtimeCityAir']);

 

ㄴ 해당 형태로 출력이되고 호출은 정상처리된것을 볼 수있다.

ㄴ 필요한 정보는 row에 담겨있다.

 

 

 

ㄴ console.log(data['RealtimeCityAir']['row']); 로 다시 재출력

ㄴ 필요한 정보를 받아온다.

ㄴ 원하는 인덱스를 지정하고 필요한 특정 값을 호출하면 최종 완료

data['RealtimeCityAir']['row'][0]["IDEX_NM"];
ㄴ data['RealtimeCityAir']['row'][인덱스번호]["미세먼지상태"];

 

4. 최종활용

ㄴ 다른 api와 같이 활용하여 정보를 가공해서 지도에 농도와 미세먼지상태를 뿌려주는 형태로 활용했다.