DEV Community

Vicente G. Reyes
Vicente G. Reyes

Posted on

#solved Data not showing on Django Template

I don't know why it isn't showing on the templates when I think I implemented it right.

the template is :

              <div class="row">
              {% for volunteer_name in volunteer %}
                <div class="col-md-4 col-sm-6">
                  <div class="team-wrapper">
                      <div class="team-img">
                          <img src="{{ volunteer_name.img.url }}" class="img-responsive" alt="Image">
                      </div><!-- /.team-img -->

                      <div class="team-title">
                          <h3><a href="#">{{ volunteer_name.name }}</a></h3>
                      </div><!-- /.team-title -->


                  </div><!-- /.team-wrapper -->
              {% endfor %}
                </div><!-- /.col-md-4 -->

              </div><!-- /.row -->
Enter fullscreen mode Exit fullscreen mode

models.py is:

class Volunteer(models.Model):
    image = models.ImageField(max_length=100, upload_to='volunteer/')
    name = models.CharField(max_length=100)
    facebook = models.CharField(max_length=100, validators=[URLValidator])
    twitter = models.CharField(max_length=100, validators=[URLValidator])
    linkedin = models.CharField(max_length=100, validators=[URLValidator])

    def __str__(self):
        return self.name
Enter fullscreen mode Exit fullscreen mode

views.py

def home(request):
    amlvideo = AMLVideo.objects.filter().order_by("-category", "-language", "-level")
    volunteer_name = Volunteer.objects.all()
    img = Volunteer.objects.all()
    context = {"home": home}
    return render(request, "aml/home.html", context)
Enter fullscreen mode Exit fullscreen mode

Can someone help me?

Discussion (16)

Collapse
olaoluwa98 profile image
Emmanuel Awotunde

Your view is not well structured. I see you repeating Volunteer.objects.all() twice. Also, your context is sending in a request obj, you are supposed to send the data that you fetched from your database i.e Volunteer.objects.all(). Also what's the amlvideo = AMLVideo.objects.filter().order_by("-category", "-language", "-level") for? You are not sending it to the template

Collapse
highcenburg profile image
Vicente G. Reyes Author

Ok so I removed the other Volunteer.objects.all() already. I would send those to the template. Just not on this model. How am I supposed to send the data form my database then?

Collapse
olaoluwa98 profile image
Emmanuel Awotunde

I think you can restructure your view to look like this:

def home(request):
    aml_videos = AMLVideo.objects.filter().order_by("-category", "-language", "-level")
    volunteers = Volunteer.objects.all()
    context = {'aml_videos': aml_videos, 'volunteers': volunteers}
    return render(request, "aml/home.html", context)

Then your template would look like this:

 <div class="row">
    {% for volunteer in volunteers %}
        <div class="col-md-4 col-sm-6">
            <div class="team-wrapper">
                <div class="team-img">
                    <img src="{{ volunteer.img.url }}" class="img-responsive" alt="Image">
                </div><!-- /.team-img -->

                <div class="team-title">
                    <h3><a href="#">{{ volunteer.name }}</a></h3>
                </div><!-- /.team-title -->

            </div><!-- /.team-wrapper -->
        </div><!-- /.col-md-4 -->
    {% endfor %}
</div><!-- /.row -->
Thread Thread
highcenburg profile image
Vicente G. Reyes Author

This solved the problem. Thank you!

Thread Thread
olaoluwa98 profile image
Emmanuel Awotunde

Anytime!

Thread Thread
preciselyalyss profile image
Alyss πŸ’œ

Thanks for helping folks out and welcome to Dev.to!

Thread Thread
olaoluwa98 profile image
Emmanuel Awotunde

My pleasure!

Collapse
thepylot profile image
ThePylot

I think it is small loop issue

              <div class="row">
              {% for name in volunteer_name %}
                <div class="col-md-4 col-sm-6">
                  <div class="team-wrapper">
                      <div class="team-img">
                          <img src="{{ name.img.url }}" class="img-responsive" alt="Image">
                      </div><!-- /.team-img -->

                      <div class="team-title">
                          <h3><a href="#">{{ name.name }}</a></h3>
                      </div><!-- /.team-title -->


                  </div><!-- /.team-wrapper -->
              {% endfor %}
                </div><!-- /.col-md-4 -->

              </div><!-- /.row -->

and context should be

context = {"volunteer_name": volunteer_name}
Collapse
highcenburg profile image
Vicente G. Reyes Author

Fixed it already with this plus the

<img src="{{ volunteer.image.url }}" class="img-responsive" alt="Image">

Now the image doesn't show

Collapse
hamatti profile image
Juha-Matti Santala

Your view is not sending any sensible data. It's sending the view function itself.

Try this:

def home(request):
    volunteer = Volunteer.objects.all()
    return render(request, 'aml/home.html', { 'volunteer': volunteer })

I think that should display the data correctly. At that point, we can refactor a bit to make the code easier to read. Now you're using volunteer (in your template) as a variable name but in view, it contains all volunteers.

So maybe renaming the volunteer into volunteers and then in your template code:

  {% for volunteer_name in volunteer %}

into

  {% for volunteer in volunteers %}

and then replacing all volunteer_name with volunteer since you're passing in the entire model object, not just their name.

Let me know if the first bit works!

Collapse
hamatti profile image
Juha-Matti Santala

After the refactoring, it would look like this

Template:

<div class="row">
    {% for volunteer in volunteers %}
        <div class="col-md-4 col-sm-6">
            <div class="team-wrapper">
                <div class="team-img">
                    <img src="{{ volunteer.img.url }}" class="img-responsive" alt="Image">
                </div>
                <div class="team-title">
                    <h3>
                        <a href="#">{{ volunteer.name }}</a>
                    </h3>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

View:

def home(request):
    volunteers = Volunteer.objects.all()
    return render(request, "aml/home.html", { 'volunteers': volunteers })

(the model looks good as is)

Collapse
taleb profile image
Taleb

Can you try this.

render(request, "aml/home.html", {'volunteer_name': volunteer_name, })
Enter fullscreen mode Exit fullscreen mode
Collapse
highcenburg profile image
Vicente G. Reyes Author

Data still didn't show. Do you think it's a bug on Django 2.2.4?

Collapse
cyb3rchamp profile image
Alaa

me too some template would show data but other wont even when i use the same even when i use the same way to display the data

Collapse
taleb profile image
Taleb

you are setting context to home but home is set to anything. maybe you want
context = {'volunteer_name': volunteer_name, }

Collapse
highcenburg profile image
Vicente G. Reyes Author

Hey thanks for replying. I tried this but is still not showing data on the front.