뇌 채우기 공간

[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>

이 페이지를 로딩하자마자 get_list() 를 실행한다

 

서울시 api에서 값을 요청하는데 

응답으로 돌려준 json데이터에서 

response["RealtimeCityAir"]["row"];  이 값을 rows에 담아달라

 

for문 안을 보면

rows만큼 돌면서

이 값들만 특별하게 gu_name과 gu_mise에 저장하고 

gu_mise가 200이상이면 

html_temp 에 있는 html을 출력해달라

그것을 아이디가 gu-list인 것에 붙여서 출력해라

 

그것은 바로 body에 저부분이다.

저 부분이 나오면 안되니까 처음에

비워준다.

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > python' 카테고리의 다른 글

[python] 크롤링으로 영화 제목 랭킹 별점 가져오기  (0) 2021.06.10
[python] 크롤링 기본 뼈대  (0) 2021.06.10
[jinja2] 값 끼워넣기 / ㅇㅇ아 안녕 이라고 적었을때 ㅇㅇ에 값 끼워넣기  (0) 2021.06.09
[aws] ec2 서버 오픈하기  (0) 2021.06.08
[python] 사진 업로드 되고 그것을 바로 보여주게 하는 법  (0) 2021.06.08
'WEB/python' Related Articles more