Ajax 연습하기(1) - 서울시 미세먼지 API

usop 2022. 5. 27. 16:56

* Ajax를 연습하기 앞서 주의사항 *

## jquery 를 꼭 임포트 해놓아야 Ajax를 사용할 수 있다!

- Ajax 의 기본 골격 (참고용)

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

- 연습하기 (서울시 미세먼지API)

type은 GET ( 정보를 가져오기만 할 것이기 때문에 get을 사용해주자)

서울시 미세먼지API 주소를 가져와보았다.

주소를 url 에 복사하여 넣어보자.

정상적으로 데이터를 가져왔다

이제 RealtimeCityAir 에 row에서 [1] 데이터를 가져와보자 ( response['RealtimeCityAir']['row'][1] )

종로구 지역의 미세먼지 데이터가 출력되는 것을 확인할 수 있다.

이번에는 각 구마다 미세먼지의 값만 가져와보자

rows 변수에 [RealtimeCityAir] 에 [row] 안의 데이터를 담은 후

for문을 돌려 각 구 (MSRSTE_NM) 와 미세먼지 값(IDEX_MVL)을 가져와보자

이번에 미세먼지 농도가 70 미만의 쾌적한 지역만 불러와보자

아주 간단하다.

if ( gu_mise < 70) 일때만 console.log 찍게 처리해주면 된다.