Ajax 활용 미세먼지 70이상 값만 빨간색 표시 예제

미세먼지 70이상 값 빨간색 표시 예제

Ajax , for, If 문 활용

    <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']

                        let temp_html = ``
                        if (gu_mise > 70) {
                           temp_html = `<li style="color:red;">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`

                        }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

Ajax 콜을 Get 요청으로 받아온 뒤

 

rows의 변수를 정한다.

rows는 받아온 response값의 RealtimeCityAir안의 row의 전부.

 

for문을 이용해 반복문을 돌린다.

gu_name값은 아까 정한 row의 계속 돌아갈 i번째의 MSRSTE_NM 값이고,

gu_mise값은 IDEX_MVL 값이다.

 

temp_html 은 백틱을 사용하여 공백 처리한다.

그 후 if문을 활용해 70이상일 경우엔 color:red를 주고,

else (아닐 경우엔) 그냥 준다.

 

if문을 벗어나서 append를 활용하여 temp_html을 더해준다.