[python] 미세먼지 api에서 값을 받아와서 동적으로 화면에 보여주기

WEB/python

[python] 미세먼지 api에서 값을 받아와서 동적으로 화면에 보여주기

자바칩 프라푸치노 2021. 6. 9. 17:10

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            get_list()
        })

        function get_list() {
            //ajax를 서울시 오픈 api에게 보내는데
            //보내는게 성공을 하면 응답으로 돌려준 json데이터에서 저런 값들을 가져와서 rows에 넣고 그걸 출력해줘
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    $('#gu-list').empty()
                    console.log(rows)
                    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)
                        if (gu_mise>=200){
                                  let html_temp =`<li>${gu_name}: ${gu_mise}</li>`
                               $('#gu-list').append(html_temp)
                        }

                    }
                }
            })
        }
    </script>
</head>
<body>
<h1>상세페이지</h1>
<button onclick=" window.location.href='/'">메인으로 돌아가기</button>
<ul id="gu-list">
    <li>중구: 20</li>
</ul>
</body>
</html>