본문 바로가기

카테고리 없음

[k디지털크레딧] 16. Ajax 시작하기(복습)

복습할 때 참고! - 해설) 모든 구의 미세먼지 값을 찍어보기

  1. 미세먼지 데이터가 어디에 있는지 찾기

위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있습니다. 이걸 꺼내볼까요?

 

$.ajax({

type: "GET",

url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",

data: {},

success: function(response){

    let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!

    console.log(mise_list);

  }

})

 

2. 반복문으로 구 데이터를 출력해보기

row의 값을 mise_list에 담았으니, 반복문을 이용해보겠습니다!

$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",

data: {},

success: function (response) {

   let mise_list = response["RealtimeCityAir"]["row"];

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

     let mise = mise_list[i];

     console.log(mise);

    }

  },

 });

 

3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기

구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력

$.ajax({ type: "GET",

url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",

data: {},

success: function (response) {

   let mise_list = response["RealtimeCityAir"]["row"];

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

     let mise = mise_list[i];

     let gu_name = mise["MSRSTE_NM"];

     let gu_mise = mise["IDEX_MVL"];

     console.log(mise);

    }

  },

 });