Working on porting over a personal project of mine from flask to django, an issue I’ve been struggling with for a bit now is not being able to directly call index. Below is the code from my flask:

{% for item in time_period %}
        <div class="col-lg-3 col-sm-4">
            <div class="card h-100 border border-dark rounded">
                <img class="card-image" src={{temp_icon[loop.index0]}}>
                </img>
                <div class="card-body">
                    <h2>{{item}}, {{temperature[loop.index0]}} F</h2>
                    <p class="card-text">{{forecast[loop.index0]}}</p>
                </div>
            </div>
        </div>
{% endfor %}

In Django views, I have created this as. The weather.py module returns each variable as a list.

def forecast(request):
    # Utilize weather.py to grab the forecast for the next three time periods as defined by NWS
    time_period, temperature, forecast, temp_icon = weather()
    context = {}
    context = {'time_period': time_period,
               'temperature': temperature,
               'forecast': forecast,
               'temp_icon': temp_icon}
    print(context)
    return render(request, "forecast.html", context)

sample data looks like

'time_period': ['This Afternoon', 'Tonight', 'Friday', 'Friday Night'], 
'temperature': [88, 70, 95, 72], 
'forecast': ['Partly Sunny', 'Slight Chance Showers And Thunderstorms', 'Chance Showers And Thunderstorms', 'Chance Showers And Thunderstorms'], 
'temp_icon': ['https://api.weather.gov/icons/land/day/bkn?size=medium', 'https://api.weather.gov/icons/land/night/tsra_hi,20?size=medium', 'https://api.weather.gov/icons/land/day/rain_showers,20/tsra_hi,40?size=medium', 'https://api.weather.gov/icons/land/night/tsra_hi,30?size=medium']

Currently in my template I have been having a hard time looping through each list in parallel. My view shows the time_period piece correctly but unfortunately I have been unable to utilize the index feature I’m more used to in jinja.

<section class="container">
    <h1>Forecast</h1>
    <hr>
</section>
<section class="flex-container">
    <div class="row">
        {% for n in time_period %}
                <div class="col-lg-3 col-sm-4">
                    <div class="card h-100 border border-dark rounded">
                        <img class="card-image" src={{temp_icon}}>
                        </img>
                        <div class="card-body">
                            <h2>{{ n }}, {{temperature}} F</h2>
                            <p class="card-text">{{forecast}}</p>
                        </div>
                    </div>
                </div>
        {% endfor %}
    </div>
</section>
{% endblock %}

I’ve tried a handful of things based on other stackexchange info I found. For example, trying to access the keys utilizing this format

context[Forecast] = {'time_period': time_period,
               'temperature': temperature,
               'forecast': forecast,
               'temp_icon': temp_icon}

Also, tried doing forcounters but couldn’t get it to work either as well as zipping the variable lists up and passing that way.

The way I have it now, it at least does iterate over the initial time_periods.

=============================================================
UPDATE

I ended up resolving my issue by redoing how I format the data. Instead of passing a dictionary of lists, I just iterated and created a more straightforward dictionary in my loop. New data looks like:

{0: {'time_period': 'This Afternoon', 'temperature': 88, 'forecast': 'Partly Sunny', 'temp_icon': 'https://api.weather.gov/icons/land/day/bkn?size=medium'}, 
1: {'time_period': 'Tonight', 'temperature': 70, 'forecast': 'Slight Chance Rain Showers', 'temp_icon': 'https://api.weather.gov/icons/land/night/rain_showers,20?size=medium'}, 
2: {'time_period': 'Friday', 'temperature': 94, 'forecast': 'Partly Sunny then Chance Showers And Thunderstorms', 'temp_icon': 'https://api.weather.gov/icons/land/day/bkn/tsra_hi,40?size=medium'}, 
3: {'time_period': 'Friday 
    Night', 'temperature': 72, 'forecast': 'Chance Showers And Thunderstorms', 'temp_icon': 'https://api.weather.gov/icons/land/night/tsra_hi,40/tsra_hi,20?size=medium'}}

In my template I pulled it in like:

{% for key, value in weather_dict.items %}

            <div class="col-lg-3 col-sm-4">
                <div class="card h-100 border border-dark rounded">
                    <img class="card-image" src={{value.temp_icon}}>
                    </img>
                    <div class="card-body">
                        <h2>{{ value.time_period }}, {{ value.temperature }} F</h2>
                        <p class="card-text">{{ value.forecast }}</p>
                    </div>
                </div>
            </div>

{% endfor %}