nobu blog

プログラミングやゲームの話など。

*



Djangoでtemplate(html)にjsonデータを埋め込む方法

   

概要

WEBアプリで、画面側(ブラウザ側)で動的に画面表示を変更したい場合Javascirptを使った処理が必要になります。
(例えば、職業をコンボボックスで選択すると、その後に職業に応じた質問が表示されるなど。)
このような場合、下記の方法が考えられます。

  • 全ての要素のHTML要素を定義しておいて、DOM操作で動的に表示を切り替える
  • 全ての要素をJS側でデータとして保持しておき、DOM操作で動的に表示を切り替える

後者の方が、DOM操作が少なく済むので個人的には好きです。
イメージ的には下記のような変数をJS側で定義しておく感じですね。

一般的にはそういったJSのデータを作るのは別途REST APIを呼んだり、HTML要素を読み込むなど、動的にデータを生成します。
ですが、実はhtmlテンプレートを使用してサーバー側でタグを描画するの同じように、Javasciprtの内容自体も実は動的に描画できたりします。
今回はPythonのDjangoでこのような方法を実現するための手段を説明します。
Pythonの変数を直接jsonデータとして描画できるので自前で隠しHTML要素を描画する方法より楽ちんです。

スポンサーリンク

方法

View

まずはView側の説明をします。
View上ではhtmlテンプレートに渡す変数を定義して、json.dumpsでjson化してからテンプレートに渡すだけです。

スポンサーリンク

テンプレート

テンプレート側は渡されたデータをJSの変数として描画するだけです。
safeをパイプしてエスケープも必要です。

 - Javascript, python