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>