[Ajax]GET을 이용하여 정보 읽어오기

그렇다면, Ajax를 활용하여 정보를 어떻게 읽어올 수 있을 지 방법을 살펴보도록 하겠습니다!

(*Ajax는 JQueary 를 import한 페이지에서만 사용이 가능합니다)

 

먼저 Ajax의 기본 코드는 아래와 같습니다.

 

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

 

type에 GET이 들어가있으니, read를 위한 ajax임을 알 수 있겠죠?

 

먼저 url 란에 정보를 얻을 url주소를 넣어주겠습니다.

 

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

 

이렇게 console 창에 작성한 뒤 바로 엔터를 쳐보면,

제가 제공한 url 안에 있는 모든 정보를 잘 읽어왔음을 볼 수 있습니다.

 

언제나 그렇듯, 내가 원하는 정보만을 가져올 수 있어야겠죠?

그렇다면 이번에는 저 딕셔너리 안의 많은 정보들 중에서 "row"값만 가져와보도록 하겠습니다. 

 

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

 

url의 정보가 response안에 들어간다는 점을 이용해서,

위와 같이 코드를 작성해줍니다.

 

그러면 이렇게 row의 모든 정보를 잘 읽어오고 있습니다.

 

좀 더 파고들어가서,

구의 이름과 해당 구의 미세먼지 농도만 읽어내고 싶다면 어떻게 하면 될까요?

 

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response['RealtimeCityAir']['row']
    for (let i = 0; i < rows.length; i++){
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']
        console.log(gu_name, gu_mise)
  }}
})

 

이렇게 for 문을 사용하여 rows 안의 구 이름과 해당 구의 미세먼지 농도만을 읽어낼 수 있습니다.

 

 

더 나아가 미세먼지 농도가 90 미만인 구의 이름과 해당 구의 미세먼지 농도를 표시하고 싶다면 어떻게 하면 될까요?

 

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response['RealtimeCityAir']['row']
    for (let i = 0; i < rows.length; i++){
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']
        if (gu_mise < 90) {
            console.log(gu_name, gu_mise)
        } 
  }}
})

 

이번에는 if 문을 추가해서 원하는 정보만 읽어올 수 있었습니다!