[ajax] 기본골격, 미세먼지 (feat. API, for)

아래 첨부된 ajax.text에 저장된 내용과 URL (미세먼지 API) 가지고 서울시에서 실시간으로 제공되는 미세먼지 값을 나열해보려고 한다.

 

ajax.txt

0.00MB

 

 

URL : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

 

Jsonview 설치 후 깔끔하게 정리되어 있음.

 

$.ajax({
     type: "GET",
     url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
     data: {},
     success: function(response){
     console.log(response)
  }
})

 

ajax의 기본 골격이며 위에서 얻어온 url을 아래 url에 입력하고 엔터를 누르면 아래와 같이 미세먼지 api에 대한 딕셔너리와 리스트를 받아온다.

 

RealtimeCityAir 내 row에서 데이터를 받아오려고 한다.

이후 몇 가지 조건을 걸어서 데이터를 나열해보자

 

(1) 각 구별로 미세먼지 값을 나열하기 ( for 사용 )

(2) 미세먼지 값이 70 미만인 곳을 필터링 하기 ( if 사용 )

 

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response['RealtimeCityAir']['row']

// rows에 받아 오고 싶은 데이터 response[] 안에 넣어준다.

    for (let i = 0; i < rows.length; i++){

 

// for 문을 이용하여 i 가 rows.length 인 0~25가 될 떄까지 반복하여 데이터를 받아온다.

        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']

// row 안에 포함되어 있는 'MSRSTE_NM' 구 이름, 'IDEX_MVL' 미세먼지 값을 선언해준다.
        if (gu_mise < 70){

// 미세먼지 값이 70 미만이 곳의 구를 모두 표시해준다.
        console.log(gu_name,gu_mise)
        }
        }
  }
})