How to render each item of a dictionary in django

Question:

I am working on a django project whereby users upload resumes and they are parsed before the results are save in user profile. I have achieved the parsing part and saved the data bu the problem is rendering the data. An example is in the skills field whereby the data is stored as a dictionary and therefore I cannot display them one at a time.
Here is my models.py:

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    avatar = models.ImageField(default='default.jpg', upload_to='profile_images')
    bio = models.TextField()
    resume        = models.FileField('Upload Resumes', upload_to='resumes/', null=True, blank=True,default='resume.docx')
    name          = models.CharField('Name', max_length=255, null=True, blank=True)
    email         = models.CharField('Email', max_length=255, null=True, blank=True)
    mobile_number = models.CharField('Mobile Number',  max_length=255, null=True, blank=True)
    education     = models.CharField('Education', max_length=255, null=True, blank=True)
    skills        = models.CharField('Skills', max_length=1000, null=True, blank=True)
    company_name  = models.CharField('Company Name', max_length=1000, null=True, blank=True)
    college_name  = models.CharField('College Name', max_length=1000, null=True, blank=True)
    designation   = models.CharField('Designation', max_length=1000, null=True, blank=True)
    experience    = models.CharField('Experience', max_length=1000, null=True, blank=True)
    total_experience  = models.CharField('Total Experience (in Years)', max_length=1000, null=True, blank=True)
    whatsapp       = models.URLField(null=True, blank=True)
    facebook       = models.URLField(null=True, blank=True)
    twitter       = models.URLField(null=True, blank=True)
    linkedin       = models.URLField(null=True, blank=True)
    languages    = models.CharField(max_length=1000, null=True, blank=True)
    profession = models.CharField(max_length=100, null=True, blank=True)
    nationality = models.CharField(max_length=100, null=True, blank=True)

    def __str__(self):
        return self.user.username

    # resizing images
    def save(self, *args, **kwargs):
        super().save()

        img = Image.open(self.avatar.path)

        if img.height > 100 or img.width > 100:
            new_img = (100, 100)
            img.thumbnail(new_img)
            img.save(self.avatar.path)

And here is my views.py:

@login_required
def profile(request):
    if request.method == 'POST':
        profile_form = UpdateProfileForm(request.POST, request.FILES, instance=request.user.profile)
        files = request.FILES.getlist('resume')
        resumes_data = []
        if profile_form.is_valid():
            for file in files:
                try:
                    # saving the file
                    resume = profile_form.cleaned_data['resume']

                    parser = ResumeParser(file.temporary_file_path())
                    data = parser.get_extracted_data()
                    resumes_data.append(data)
                    profile_form.instance.name = data.get('name')
                    profile_form.instance.email              = data.get('email')
                    profile_form.instance.mobile_number      = data.get('mobile_number')
                    if data.get('degree') is not None:
                        profile_form.instance.education      = ', '.join(data.get('degree'))
                    else:
                        profile_form.instance.education      = None
                        profile_form.instance.company_names      = data.get('company_names')
                        profile_form.instance.college_name       = data.get('college_name')
                        profile_form.instance.designation        = data.get('designation')
                        profile_form.instance.total_experience   = data.get('total_experience')
                    if data.get('skills') is not None:
                        profile_form.instance.skills         = data.get('skills')
                    else:
                        profile_form.instance.skills         = None

                    if data.get('experience') is not None:
                        profile_form.instance.experience     = ','.join(data.get('experience'))
                    else:
                        profile_form.instance.experience     = None
                    profile_form.save()
                    return redirect('users-profile')
                except IntegrityError:
                    messages.warning(request, 'Duplicate resume found')
                    return redirect('users-profile')
                
            profile_form.save()
            messages.success(request, 'Your profile is updated successfully')
            return redirect('userprofile')
    else:
        profile_form = UpdateProfileForm(instance=request.user.profile)

    return render(request, 'user/resumeprofile.html', {'profile_form': profile_form})

@login_required
def myprofile(request, user_id):
    profile = Profile.objects.get(id=user_id)
    context = {'profile':profile}
    return render(request, 'user/profile.html', context)

Here is my template for the profile:

<div class="mt-4">
                                        <h5 class="fs-18 fw-bold">Skills</h5>
                                        
                                       <span class="badge fs-13 bg-soft-blue "><p>{{user.profile.skills}}</p></span>
                                    </div>

In the current setup, the results I am getting are as shown in the image:
A screenshot of the results being renedered

Asked By: KipronoKirui

||

Answers:

As I can see from your image, you are saving all your skills in a list. So you can try doing:

{% for skill in user.profile.skills %}
{{skill}}
{% endfor %}

If you want to print it as a list you can try it out this way:

<ul>
{% for skill in user.profile.skills %}
<li>{{skill}}</li>
{% endfor %}
</ul>
Answered By: haduki
Categories: questions Tags: , , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.