How to pass object properties from view to template in Django? - django

Question

I must be missing something really basic here. I have created an object in my view to pass to my template. All the properties of my object are passed successfully but the last property, an integer, is not shown when rendering my template. Why?
Here is my code:
Views.py:
def courseListView(request):
object_list = {}
courses = Course.objects.all()
for course in courses:
object_list[course] = {
'title': course.title,
'slug': course.slug,
'thumbnail': course.thumbnail,
'get_absolute_url': '/' + course.slug,
'progress': int(lessonsCompleted.objects.filter(user=request.user.id, course=course.id).count() / course.lessons.count() * 100)
}
print(object_list)
context = {
'object_list': object_list,
}
return render(request, "courses/course_list.html", context)
This way I am creating an object that looks like this when I print it:
{<Course: Mezclar música chill y ambient>: {'title': 'Mezclar música chill y ambient', 'slug': 'mezcla-chill-ambient', 'thumbnail': <ImageFieldFile: mixing.jpeg>, 'get_absolute_url': '/mezcla-chill-ambient', 'progress': 66}, <Course: Componer bases electrónicas>: {'title': 'Componer bases electrónicas', 'slug': 'componer-bases-electronicas', 'thumbnail': <ImageFieldFile: beats.jpeg>, 'get_absolute_url': '/componer-bases-electronicas', 'progress': 75}, <Course: Melodías ultrasónicas>: {'title': 'Melodías ultrasónicas', 'slug': 'melodias-ultrasonicas', 'thumbnail': <ImageFieldFile: melodies.jpeg>, 'get_absolute_url': '/melodias-ultrasonicas', 'progress': 50}}
Ultimately I want to pass to the template the progress for each course, for the currently logged user, so I can show this information for each course in my web page.
To show that, in my template I am using this code:
{% for object in object_list %}
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="/static/{{ object.thumbnail }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ object.title }}</h5>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-container w3-blue w3-round-xlarge" id="progress-{{ object.slug }}" style="width:{{ object.progress }}%">{{ object.progress }}%</div>
</div>
<div class="card-footer">
Ver curso
</div>
</div>
</div>
</div>
</div>
{% endfor %}
All other properties of my object are rendered correctly: title, slug, thumbnail and get_absolute_url. However, progress, eventhough it is printed correctly in my terminal where I am running Django, when my template is rendered, this bit {{ object.progress }} is not rendering the desired result. It should be rendering the integer that represents the percentage completed for each course. Instead, it renders nothing:
https://imgur.com/a/SOIvJ5U
I can not see what I am missing. Any help would be really appreciated, I am stuck, really close to my aim of being able to show the progress for each course for the logged user.

Answer 1

Finally, thanks to another user I have understood the problem. The problem I had is I am not passing an object, actually it is a dictionary, it's not the same thing. If I want to access the properties of my dictionary here is what I need to do:
{% for object, props in object_list.items %} instead of {% for object in object_list %}.
In this way I can access in my for loop the property 'prog' as I wanted.
Here is how it looks like now that it is working:
views.py:
def courseListView(request):
object_list = {}
courses = Course.objects.all()
for course in courses:
object_list[course] = {
'prog': int(lessonsCompleted.objects.filter(user=request.user.id, course=course.id).count() / course.lessons.count() * 100),
}
print(courses)
print(request.user)
print(object_list)
context = {
'object_list': object_list,
}
return render(request, "courses/course_list.html", context)
Note that now I am only passing the 'prog' kay in my dictionary. I don't need the others as they are in the object anyways.
template:
<div class="container d-flex justify-content-center">
<div class="row">
<h1>Cursos</h1>
<div class="container-fluid mt-4 d-flex card-deck justify-content-center">
{% for object, props in object_list.items %}
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="/static/{{ object.thumbnail }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ object.title }}</h5>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-container w3-blue w3-round-xlarge" id="progress-{{ object.slug }}" style="width:{{ props.prog }}%;">{{ props.prog }}%</div>
</div>
<div class="card-footer">
Ver curso
</div>
<script>console.log({{ object_list }});</script>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>