[Ajax] 미세먼지 정보 받아오기 (feat. temp_html, append)

실시간 미세먼지 정보를 API로부터 받아와서 확인하려고 한다. 

 

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

 

오픈 API에서 필요로 한 데이터는 RealtimeCityAir - row - MSRSTE_NM , IDEX_MVL 이다.

 

 

 

가장 먼저 Ajax 기본 틀에 URL을 입력하고 반복문(for)을 이용하여 25개 구에 대한 값을 받아온다.

 

<script>
     function q1() {
          $('#names-q1').empty()
          //처음에 가지고 있던 데이터 지우기
          $.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) 결과값이 잘 나오는지 체크
                         let temp_html = ''
                         // temp_html을 비워둔다.
                         if (gu_mise > 70) {

                         // 미세먼지 값이 70 초과인 경우 빨간색 글씨로 표시하기 위해 아래 <li>에 class bad 선언하고

                         <style> .bad = red;를 선언한다.
                             temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                         } else {
                              temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                         }
                         $('#names-q1').append(temp_html)
                    }
               }
          })
     }
</script>