python-jinja2

실시간 서울시 미세먼지 api를 이용해 데이터를 받아서 화면에 출력하는 기존 ajax 코드는

   $(document).ready(function () {
       get_list()
   })

   function get_list() {
       $('#gu-list').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"]

                   if (gu_mise > 60) {
                       let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                       $('#gu-list').append(temp_html)
                   }
               }
           }
       })
   }

이런식으로 temp_html을 설정하고 append(temp_html)을 이용해 붙여 주었다면,

파이썬 패키지 jinja2를 이용하였을 때는 html body 본문에

<h3>받은 단어는 {{ word }}</h3>
<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>

형식으로 {% %}를 이용하여 나타낼 수 있고,

서버부분 app.py 파일의 페이지를 가져오는 코드에

    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']

코드를 추가하여 작성하는 식으로 사용할 수 있다.

app.py의 코드를 추가한 api 부분의 전체 코드는

@app.route('/detail/<keyword>')
def detail (keyword):
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    return render_template("detail.html", rows=rows, word=keyword)

이런 식으로 작성된다.