서울시 오픈 API - jinja2 사용하여 나타내기

Today I Learned

서울시 오픈 API - jinja2 사용하여 나타내기

개발자 김혜린 2021. 10. 6. 22:28

                        if (gu_mise >= 40) {
                            let html_temp = `<li>${gu_name}: ${gu_mise}</li>`
                            $("#gu-list").append(html_temp)
                        }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> #Ajax 요청 위해 jquery import
    <script>
        $(document).ready(function () { #페이지 로딩하면 
            get_list()
        })

        function get_list() {
            $.ajax({
                type: "GET", #GET요청을 서울시 API로 보내기
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) { #응답으로 돌려준 JSON 데이터에서
                    let rows = response["RealtimeCityAir"]["row"];
                    console.log(rows)
                }
            })
        }
    </script>

구 : 미세먼지 로 리스트 만들기

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

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

</ul>
</body>

if문으로 미세먼지 40 이상일 때만

if (gu_mise >= 40) {
let html_temp = `<li>${gu_name}: ${gu_mise}</li>`
$("#gu-list").append(html_temp)
                   }

jinja로 해보자~

app.py에

@app.route('/detail')
def detail():
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json() #r을 json형태로 나타내줘
    rows = response['RealtimeCityAir']['row']
    return render_template("detail.html", rows=rows) #rows로 보낸다

파이참 설정 들어가서

<ul id="gu-list">
    <li>{{ rows[0]["MSRSTE_NM"]}}: {{ rows[0]["IDEX_MVL"]|int}}</li>
</ul>

너무 기니까 변수로 받아보자

<ul id="gu-list">
    {% set gu_name = rows[0]["MSRSTE_NM"] %} {# 변수 설정하는 방법 #}
    {% set gu_mise = rows[0]["IDEX_MVL"] %}
    <li>{{gu_name}}: {{gu_mise|int}}</li>
</ul>

for문과 if문 추가

<ul id="gu-list">
    {% for row in rows %}
        {% set gu_name = row["MSRSTE_NM"] %} {# 변수 설정하는 방법 #}
        {% set gu_mise = row["IDEX_MVL"] %}
        {% if gu_mise>=60 %}
            <li>{{ gu_name }}: {{ gu_mise|int }}</li>
        {% endif %}
    {% endfor %}
</ul>

주소의 일부인 good 문자열이

서버에서 keyword라는 변수로 받아서

그것을 render template 할때 word로 넘겨줘서

detail.html에 나타나는 것을 볼 수 있다.

@app.route('/detail/<keyword>')
def detail(keyword):
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json() #r을 json형태로 나타내줘
    rows = response['RealtimeCityAir']['row']

    word_receive=request.args.get("word_give") #get 요청으로 받은 파라미터를 request.args.get로 받기
    print(word_receive)

    return render_template("detail.html",rows=rows,word=keyword)

<h3>받은 단어는 {{ word }}</h3>