jinja2ファイル内でループさせて複数の辞書を読み込ませる方法にるいて

実行環境はVScodeで
ブラウザはchromeです。

まずファイルを作ります。

そして

python
1from jinja2 import Template, Environment, FileSystemLoader
2import json
3
4list1 = ["hoge","hoge2","hoge3"]
5list2 = [["あ", "い", "う"], ["え", "お", "か"], ["き", "く", "け"]]
6n = "name"
7j = "genre"
8
9dic = {v1 : {n: v1, j : v2} for v1,v2 in zip(list1, list2)}
10
11
12# jsonファイルに書き出し
13with open("parameter.json", mode="w", encoding='utf-8') as f:
14    d = json.dumps(dic, ensure_ascii=False)
15    f.write(d)
16
17#テンプレート読み込み
18env = Environment(loader=FileSystemLoader('./', encoding='utf-8'))
19tmpl = env.get_template('template.j2')
20
21#設定ファイル読み込み
22with open("parameter.json", encoding='utf-8') as f:
23    params = json.load(f)
24
25#レンダリングしてhtml出力
26rendered_html = tmpl.render(params)
27with open('result.html', 'w') as f:
28    f.write(rendered_html)

を実行すると

json
1#こちらはparameter.jsonに書き出されたコード
2{
3    "hoge": {
4        "name": "hoge",
5        "genre": [
6            "あ",
7            "い",
8            "う"
9        ]
10    },
11    "hoge2": {
12        "name": "hoge2",
13        "genre": [
14            "え",
15            "お",
16            "か"
17        ]
18    },
19    "hoge3": {
20        "name": "hoge3",
21        "genre": [
22            "き",
23            "く",
24            "け"
25        ]
26    }
27}

と書き出されます
この辞書から

#ブラウザで得たい実行結果
hoge
hogeは['あ', 'い', 'う']です。

hoge2
hoge2は['え', 'お', 'か']です。

hoge
hoge3は['き', 'く', 'け']です。

ブラウザで表示させたいのですが
jinja2ファイルに
どういったコードを書き込むべきでしょうか？

試したこと

https://myafu-python.com/jinja2/
今回こちらのサイト参照しました

jinja2
1
2#template.j2
3
4<html>
5  <body>
6    <h1>{{ hoge.name }}</h1>
7    <p>{{ hoge.name }}は{{ hoge.genre }}です。</p>
8  </body>
9</html>
10

こちらを書き込むと

#実行結果をブラウザで確認
hoge
hogeは['あ', 'い', 'う']です。

をブラウザで確認することができました。

次にループさせて
すべての要素を取り出したいということで

jinaj2
1<html>
2  {% for  in dic %}
3    <h1>{{  }}</h1>
4{% for item in dic %}
5    <p>{{ item.name }}は{{ item.genre }}です。</p>
6{% endfor %}
7  </body>
8</html>

の様なコードでいくつか実行してみましたが
エラーが出てしまいましたので
こちらで質問させて頂きました。
教えていただけると幸いです。
宜しくお願い致します。

attakei

2021/08/14 13:31

最後のテンプレートではfor - endforが対になっていないため、テンプレート上のロジックがエラーになりませんか。また、dicはテンプレート変数なのですが、Pythonのコードからどのように引き渡していますか。

dd_

2021/08/14 15:26

ご返信ありがとうございます。ご指摘によりテンプレートのエラーも出なくなりました。 python上での辞書の中の形を変えたところ得たい実行結果が得られました。教えてくださりありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

python
1
2list1 = ["hoge","hoge2","hoge3"]
3list2 = [["あ", "い", "う"], ["え", "お", "か"], ["き", "く", "け"]]
4n = "name"
5g = "genre"
6
7dic = {"items" : [{n : v1, g : v2} for v1, v2 in zip(list1, list2)]}

辞書の中のを変えて

jinja2
1<html>
2  <body>
3{% for item in items %}
4    <h1>{{ item.name }}</h1>
5    <p>{{ loop.index }} : {{ item.name }}は{{ item.genre }}円です。</p>
6{% endfor %}
7  </body>
8</html>