Accessing index in Django template under a for loop - html

Question

#views.py
.
.
.
detailedStatement = {
'selectedOption1' : '90 degrees',
'correctAnswer1' : '180 degrees',
'selectedOption2' : 'angle',
'correctAnswer2' : 'side'
}
#Above dictionary contains 200 elements
diction = {
'detailedStatement' : detailedStatement
}
return render(request, "result.html", diction);
So while on an html file I wanted to access the dictionary's every element via a loop. Like every element should be listed in the html table row like following.
| Sr | Selected Option | Correct Answer |
| 1 | 90 degrees | 180 degrees |
| 2 | angle | side |
Above table is just a representation of html table not an actual table.
But the issue I am facing is... I am not able to access its index in a dynamic way.
I wrote a for loop in Django html template but
{% for dr in detailedResult.items %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option.forloop.counter}}</td>
<td>{{dr.answer.forloop.counter}}</td>
</tr>
{% endfor %}
I want my code to automatically put 1 after option and answer like option1, answer1;
How can we do this?

Answer 1

I think you should model this with a list instead of including an index in your variable names, e.g.
# views.py
detailed_statements = [{'option': '90 degrees', 'answer': '180 degrees'}, ... ] # contains 200 elements
Then in your template
{% for dr in detailed_statements %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option}}</td>
<td>{{dr.answer}}</td>
</tr>
{% endfor %}
I was a bit confused by the nested for loops in your template code - I think you only need one?