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

Question

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

views.py

from django.shortcuts import render
from django.http import HttpResponse
from .forms import MyForm
from .search import main

def index(request):
    params = {
        'result_shop_name': 'ショップ名',
        'result_link': '#',
        'result_price': '価格',
        'result_name': ['商品名1', '商品名2'],
        'result_img': '#',
        "form":MyForm()
    }
    if (request.method == 'POST'):
        result = main(request.POST["search"], request.POST['price'])
        result_name = result[0] # result[0]の値→["apple", "orange", "banana"]
        result_price = result[1] # result[1]の値→[120, 80, 150]
        result_link = result[2] # result[2]の値→["http://example.com/", "http://example.com/", "http://example.com/"]
        result_img = result[3] # result[3]の値→["http://example.com/apple.png", "http://example.com/orange.jpg", "http://example.com/banana.webp"]
        result_shop_name = result[4] # result[4]の値→["shop_a", "shop_b", "shop_c"]

        params['result_name'] = result_name
        params['result_price'] = result_price
        params['result_link'] = result_link
        params['result_img'] = result_img
        params['result_shop_name'] = result_shop_name
        params['form'] = MyForm(request.POST)
    return render(request, "fruits/template.html", params)

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

templates/fruits/template.html

<section class="section">
    <div class="columns is-multiline grid">
        <!-- ループ開始 -->
        {% for i in result_name %}
        <div class="column is-one-fifth grid-item">
        <div class="card">
            <div class="card-image">
            <figure class="image">
                <img src="{{result_img[loop.index0]}}">
            </figure>
            </div>
            <div class="card-content">
        
            <div class="content">
                <a href="{{result_link[loop.index0]}}">{{i}}</a>
            </div>
            </div>
            <footer class="card-footer">
                <div class="card-footer-item">&yen;{{result_price[loop.index0]}}</div>
                <div class="card-footer-item">{{result_shop_name[loop.index0]}}</div>
            </footer>
        </div>
        </div>
        {% endfor %}
        <!-- ループ終了 -->
    </div>
</section>

Answer 1

views.pyの修正点

        ziplist = zip(result_img, result_link, result_name, result_price, result_shop_name)

        params = {
            "ziplist": ziplist,
            "form":MyForm()
        }

        # params['result_name'] = result_name
        # params['result_price'] = result_price
        # params['result_link'] = result_link
        # params['result_img'] = result_img
        # params['result_shop_name'] = result_shop_name
        params['form'] = MyForm(request.POST)
    return render(request, "fruits/template.html", params)

templates/fruits/template.htmlの変更点

	<section class="section">
		<div class="columns is-multiline grid">
			<!-- ループ開始 -->
			{% for item1, item2, item3, item4, item5 in ziplist %}
			<div class="column is-one-fifth grid-item">
			<div class="card">
				<div class="card-image">
				<figure class="image">
					<img src="{{item1}}">
				</figure>
				</div>
				<div class="card-content">
			
				<div class="content">
					<a href="{{item2}}">{{item3}}</a>
				</div>
				</div>
				<footer class="card-footer">
					<div class="card-footer-item">&yen;{{item4}}</div>
					<div class="card-footer-item">{{item5}}</div>
				</footer>
			</div>
        	</div>
			{% endfor %}
			<!-- ループ終了 -->
		</div>
	</section>

Answer 2

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関数でまとられていることが想定されていると思います。

Comments

[castlemist]

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

[castlemist]

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