[Django] formsetを用いてeditページのtemplate内で初期値が交互に表示されるようにしたい

Question

前提・実現したいこと

Djangoを用いて旅行の日程を作成するwebアプリを作成しているのですが、編集ページを作成して、前回入力していた部分は既に入力されている状態にしたいです。

一応、初期値として反映することはできているのですが、異なるformsetを交互に表示させるようにしたいです。

前提としまして、以下のような状態が旅行作成画面のデフォルトの状態になっておりまして、「観光地を追加」ボタンをクリックしたら、入力欄が追加されるようになる感じです。

発生している問題・エラーメッセージ

上が旅行作成ページの写真です。

そして、下が上で作成したものを編集するページになります。

旅行作成ページと同じような形で編集ページも表示したいのですが、上手くいきません。

該当のソースコード

forms.py

class SpotForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    class Meta:
        model = Spot
        fields = ('spot_name', 'spot_time', 'spot_cost')
        widgets = {
            'spot_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': '観光地'}),
            'spot_time': forms.DateTimeInput(attrs={'class': 'form-control smallDate', 'placeholder': '到着時間', 'autocomplete': 'off'}),
            'spot_cost': forms.NumberInput(attrs={'class': 'form-control costs', 'placeholder': '滞在料金'})
        }

class TransportForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    class Meta:
        model = Transport
        fields = ('transport_name', 'transport_time', 'transport_fee')
        widgets = {
            'transport_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': '移動手段'}),
            'transport_time': forms.DateTimeInput(attrs={'class': 'form-control smallDate', 'placeholder': '乗る時間', 'autocomplete': 'off'}),
            'transport_fee': forms.NumberInput(attrs={'class': 'form-control costs', 'placeholder': '料金'})
        }

views.py

@login_required(login_url='/make_trip/')
def test(request):
    SpotFormSet = forms.modelformset_factory(
        Spot, form=SpotForm, extra=1
    )
    TransportFormSet = forms.modelformset_factory(
        Transport, form=TransportForm, extra=1
    )
    spots = SpotFormSet(queryset=Spot.objects.none())
    transports = TransportFormSet(queryset=Transport.objects.none())

    if request.method == 'POST':
        spot_form = SpotForm(request.POST)
        transports = TransportFormSet(request.POST)

        # 保存したtripの情報を取得
        trip_id = Trip.objects.filter(group=group_id).first()

        spot_save = spot_form.save(commit=False)
        spot_save.trip = trip_id
        spot_save.save()

        spot = spots.save(commit=False)
        for spot_db in spot:
            spot_db.trip = trip_id
            spot_db.save()

        # transport用にspotの情報を取得する
        spot_id = Spot.objects.filter(trip=trip_id)
        print('spot_id:', spot_id)
        transport = transports.save(commit=False)
        for i in range(len(transport)):
            transport[i].spot = spot_id[i]
            transport[i].save()

        return redirect(to='/make_trip/myPage')

    params = {
        'spots': spots,
        'transports': transports
    }

    return render(request, 'make_trip/test.html', params)


# 編集用のページを作成

@login_required(login_url='/make_trip/')
def test_edit(request, num):
    spot_model = Spot.objects.filter(trip=trip_model.id)
    transport_model = Transport.objects.filter(spot__in=spot_model)
    SpotFormSet = forms.modelformset_factory(
        Spot, form=SpotForm, extra=0
    )
    TransportFormSet = forms.modelformset_factory(
        Transport, form=TransportForm, extra=0
    )

    # idがnumのtripを取得する
    if request.method == 'POST':
        # 更新時は既に親モデルと繋がっている状態で渡されるから、いちいち外部キーを取得する必要はない
        spots = SpotFormSet(request.POST, queryset=spot_model)
        transports = TransportFormSet(request.POST, queryset=transport_model)

        spot = spots.save(commit=False)
        for spot_db in spot:
            spot_db.trip = trip_model
            spot_db.save()

        # transport用にspotの情報を取得する
        spot_id = Spot.objects.filter(trip=trip_model)
        print('spot_id:', spot_id)
        transport = transports.save(commit=False)
        for i in range(len(transport)):
            transport[i].spot = spot_id[i]
            transport[i].save()

        return redirect(to='/make_trip/myPage')

    # Getアクセス時の処理
    else:
        spots = SpotFormSet(queryset=spot_model)
        transports = TransportFormSet(queryset=transport_model)

    params = {
        'spots': spots,
        'transports': transports
    }
    return render(request, 'make_trip/edit.html', params)

spotもtransportもModelformsetを使用しておりまして、template内でそれぞれforを回して、初期値を設定していくようにしています。

また、一応補足としまして、trip_idなどは取得済みだと考えていただければ大丈夫です。

<form action="" method="post">
    {% csrf_token %}
        <div id="tranSpotDefault">
            <div id="tranSpot_formset">
                {{ transports.management_form }}
                {% for transport in transports %}
                <div class="row justify-content-end mb-5" id="input-transport-form-{{ forloop.counter0 }}">
                    <div class="col-2"><h1 class="text-light">↓</h1></div>
                    <div class="col-3">
                        {{ transport.transport_name }}
                    </div>
                    <div class="col-3">
                        {{ transport.transport_time }}
                    </div>
                    <div class="col-3">
                        {{ transport.transport_fee }}
                    </div>
                </div>
                {% endfor %}
                {{ spots.management_form }}
                {% for spot in spots %}
                <div class="row mb-5" id="input-spot-form-{{ forloop.counter0 }}">
                    <div class="col-4">
                        {{ spot.spot_name }}
                    </div>
                    <div class="col-4">
                        {{ spot.spot_time }}
                    </div>
                    <div class="col-4">
                        {{ spot.spot_cost }}
                    </div>
                </div>
                    {% endfor %}
            </div>
        </div>
        <div id="tranSpot"></div>
        <button class="btn btn-outline-success" type="button" id="addSpot">観光地を追加</button>
        <div class="col-6 col-md-4 col-xl-3 col-xs-12 mx-auto">
            <button type="submit" class="btn btn-light btn-block border-0" style="background-color: rgba(191, 202, 63, 0.99);">完成!</button>
        </div>
</form>

試したこと

今回投稿したコードだと、template内でforが別々に回るので、こう

views.pyの中でtransportとspotを一つのリストや辞書にまとめることによって、template内で交互にそれぞれを表示することができないかやってみたのですが、無理そうでした。
また、template内でrangeやlenを使って、インデックスを指定することに表示できないかやってみたのですが、こちらも無理そうでした。

補足情報（FW/ツールのバージョンなど）

Python v3.7.7
Visual Studio Code v1.53.2
MacOS Darwin x64 20.3.0
Django 3.0.4

Answer 1

「django-boost」を使うとPythonの組み込み関数っぽいことをテンプレート上で使えるようになります。
導入方法はググって頂いて。

上記の場合ですとzip関数を使うと上手くいくかもしれません。

{% for transport, spot in transports|zip:spots %}
  {{ transport.transport_name }}
  {{ spot.spot_name }}
{% endfor %}

のような書き方ができるようになります。
いかがでしょうか？

Comments

[kawataku]

ありがとうございます！
できるようになりました!!!!
諦めかけていたので、本当に助かりました!!!!