ツタンラーメンの忘備録

プログラミングや精神疾患、ラーメンについて書いていきます。たぶん。

Flask Admin Chart.js flaskでjson形式でフロント側にデータを投げた上で、それをhtmlファイルとは分離したjsファイルで読み込ませる

いろいろ調べたのですが、調べ方が悪いのか、全然出てこないので自分でまとめておこうと思います。
実は簡単だった。

まず基本形

return render_template('index.html', message="message", title="popopopoooon")

`render_template`
で指定したhtmlファイルを、レンダリングできます。その際引数をしていできます。
その変数はhtmlファイル上で

<p>{{ message }}</p>

などとすることで見ることができます。

配列上のものを送るときは

return render_template('index.html', a=[1, 2, 3])
{% for c in a %}
  {{c}}
{% endfor %}
//再度配列に変換したい場合
[{% for c in a %}
  {{c}},
{% endfor %}]

で扱えます。この時注意するのは、`{{c}}`をhtmlタグ内以外で(組み込みのjsコードで使う場合には)`"{c}"`として、明示的に文字列であると示す必要があります。

で、ここから、jsonとしてどう送るのか。

return_data = {
  "title":"直近の結果",
  "username":user_name,
  "labels":labels,
  "values":values,
  "reasons":reasons,
  "colors":colors
}
return render_template('graph.html', ResultSet=json.dumps(return_data))

なんで苦戦したんだろうというくらい簡単。じつはここからはまった。

html上では読み込めるがどう外部のjsファイルに読み込もうという話。


またちょっとバグではまることがあったのでチェック。
静的ファイルを読みだすときは昔のファイルを参照してしまうときがある。具体的に
a.js

alert("a");

console.log("a");

とした場合に、やり直してもアラートが出続ける。

FlaskでCSSのキャッシュを効かせなくする方法 - Life is Really Short, Have Your Life!!

これを参照して加えた。
そうすると「.js?=時間」みたくなるので、新しく読み込んでくれる。いいね!