DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Vicente Reyes
Vicente 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?

Top comments (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 Reyes

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 Reyes

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
Rashid

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 Reyes

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 Reyes

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 Reyes

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

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!