質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Q&A

解決済

2回答

4463閲覧

Djangoテンプレート内のfor文で複数のリストを回したい

castlemist

総合スコア10

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

0グッド

0クリップ

投稿2021/07/29 10:47

Djangoを用いて以下の画像のようなhtmlを描画したいと思っています。
画像はJinja2を用いて描画したhtmlですが、Djangoで再現することができません。
具体的には[loop.index0]の部分コードをどのように改変すればうまく動くのかわかりません。
ご存じの方、どうかご教示よろしくお願いいたします。

jinja2で描画した理想図

views.py

Python3

1from django.shortcuts import render 2from django.http import HttpResponse 3from .forms import MyForm 4from .search import main 5 6def index(request): 7 params = { 8 'result_shop_name': 'ショップ名', 9 'result_link': '#', 10 'result_price': '価格', 11 'result_name': ['商品名1', '商品名2'], 12 'result_img': '#', 13 "form":MyForm() 14 } 15 if (request.method == 'POST'): 16 result = main(request.POST["search"], request.POST['price']) 17 result_name = result[0] # result[0]の値→["apple", "orange", "banana"] 18 result_price = result[1] # result[1]の値→[120, 80, 150] 19 result_link = result[2] # result[2]の値→["http://example.com/", "http://example.com/", "http://example.com/"] 20 result_img = result[3] # result[3]の値→["http://example.com/apple.png", "http://example.com/orange.jpg", "http://example.com/banana.webp"] 21 result_shop_name = result[4] # result[4]の値→["shop_a", "shop_b", "shop_c"] 22 23 params['result_name'] = result_name 24 params['result_price'] = result_price 25 params['result_link'] = result_link 26 params['result_img'] = result_img 27 params['result_shop_name'] = result_shop_name 28 params['form'] = MyForm(request.POST) 29 return render(request, "fruits/template.html", params)

以下のコードはjinja2で理想的な描画ができたときのものです。
質問を言い換えるなら、
「jinja2における[loop.index0]に相当するようなDjangoの変数?はないのでしょうか?」
ということになります。

templates/fruits/template.html

html5

1<section class="section"> 2 <div class="columns is-multiline grid"> 3 <!-- ループ開始 --> 4 {% for i in result_name %} 5 <div class="column is-one-fifth grid-item"> 6 <div class="card"> 7 <div class="card-image"> 8 <figure class="image"> 9 <img src="{{result_img[loop.index0]}}"> 10 </figure> 11 </div> 12 <div class="card-content"> 13 14 <div class="content"> 15 <a href="{{result_link[loop.index0]}}">{{i}}</a> 16 </div> 17 </div> 18 <footer class="card-footer"> 19 <div class="card-footer-item">&yen;{{result_price[loop.index0]}}</div> 20 <div class="card-footer-item">{{result_shop_name[loop.index0]}}</div> 21 </footer> 22 </div> 23 </div> 24 {% endfor %} 25 <!-- ループ終了 --> 26 </div> 27</section>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

views.pyの修正点

Python3

1 ziplist = zip(result_img, result_link, result_name, result_price, result_shop_name) 2 3 params = { 4 "ziplist": ziplist, 5 "form":MyForm() 6 } 7 8 # params['result_name'] = result_name 9 # params['result_price'] = result_price 10 # params['result_link'] = result_link 11 # params['result_img'] = result_img 12 # params['result_shop_name'] = result_shop_name 13 params['form'] = MyForm(request.POST) 14 return render(request, "fruits/template.html", params)

templates/fruits/template.htmlの変更点

html5

1 <section class="section"> 2 <div class="columns is-multiline grid"> 3 <!-- ループ開始 --> 4 {% for item1, item2, item3, item4, item5 in ziplist %} 5 <div class="column is-one-fifth grid-item"> 6 <div class="card"> 7 <div class="card-image"> 8 <figure class="image"> 9 <img src="{{item1}}"> 10 </figure> 11 </div> 12 <div class="card-content"> 13 14 <div class="content"> 15 <a href="{{item2}}">{{item3}}</a> 16 </div> 17 </div> 18 <footer class="card-footer"> 19 <div class="card-footer-item">&yen;{{item4}}</div> 20 <div class="card-footer-item">{{item5}}</div> 21 </footer> 22 </div> 23 </div> 24 {% endfor %} 25 <!-- ループ終了 --> 26 </div> 27 </section>

投稿2021/07/30 04:55

castlemist

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

https://docs.djangoproject.com/ja/3.2/ref/templates/builtins/#std:templatetag-for
forloop.counter0じゃないでしょうか。


そうでした。[]でのアクセスかできないんでした。
https://stackoverflow.com/questions/4651172/reference-list-item-by-index-within-django-template#answer-29664945
のようにカスタムフィルタを作成する方法があります。

Django的には、renderを呼び出す側でparamsで渡す時点でループで回したいデータがzip関数でまとられていることが想定されていると思います。

投稿2021/07/30 00:22

編集2021/07/30 03:13
quickquip

総合スコア11029

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castlemist

2021/07/30 02:42

ご回答どうもありがとうございます。 {{result_img[loop.index0]}} を、 {{result_img[forloop.counter0]}} へ変更したところ「Could not parse the remainder」エラーが発生してHTMLの描画を実行できませんでした。したがってさらに以下のように変更しました。 {{result_img.forloop.counter0}} このように変更するとHTMLの描画はできるのですが、商品名以外のリストの値が取得できていないHTMLが描画されてしまいます。 ご指摘、アドバイスなどございましたら、引き続きよろしくお願いいたします。
castlemist

2021/07/30 04:55

できました!どうもありがとうございました! stackoverflowの記事は私には難しかったのですが、 「Django的には、renderを呼び出す側でparamsで渡す時点でループで回したいデータがzip関数でまとられていることが想定されていると思います。」 このセリフのおかげで、解決できました。 初歩的なことなのかもしれませんが、大変助かりました。 どうもありがうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問