jinja2 에서 javascript로 값 넘기기

배경

주로 웹 개발보다 기능을 개발해서 API 형식으로 구현을 하다보니 Django 보다는 Flask가 적합하다고 생각하고 사용중에 또 다시 인력 부족으로 웹페이지를 만들던 중 jinja2 에서 javascript로 데이터를 넘겨야 하는 경우가 발생해서 기록으로 남긴다.

유용한 경우

해당 기능은 ajax 통신 이전 초기에 웹 페이지가 새로로드 할때마다 초기화 해야하는 데이터가 바뀌어야 하는 경우에 사용하면 유용하다.

예를 들어 로그인된 사람마다 대시보드에 처음 표시되는 데이터를 전달하는 경우.

Flask(python3) -> Jinja2 -> javascript

원리는 Flask에서 Jinja2 템플릿을 html 문서로 만든다음에 Client에 전성한 다음에 javascript가 로드되는 순서로 동작된다는 것을 이용한 것이다. 더군다나 json은 문자기반 데이터이기 때문에 이것이 가능하다.
즉 Flask에서 데이터를 Jinja2를 통해서 문자형태로 전달 가능하다. 그럼 json을 Jinja2를 통해 작성하면 충분히 전달이 가능하다.

#Flask
import json

@app.route("/")
def index():
    data = { "a" : "b" }
    return render_templete("index.html", data=json.dumps(data, ensure_ascii=False))

<!-- jinja -->
<script>
    let initdata = JSON.parse( {{ data | safe }} );
</script>

이제 jinja2로 삽입된 위의 script 태그 이후에 받아서 사용하거나 모두 페이지로드 뒤에 해당 데이터를 사용하도록 작성하면 된다.

참조

https://stackoverflow.com/questions/15321431/how-to-pass-a-list-from-python-by-jinja2-to-javascript/22157700