loading...

#solved Data not showing on Django Template

highcenburg profile image Vicente G. Reyes ・1 min read

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 -->

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

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)

Can someone help me?

Posted on Apr 27 by:

highcenburg profile

Vicente G. Reyes

@highcenburg

A Self-Directed Learner, a Freelance Web Developer, a Volunteer Developer at Project Website, & DEV Tag-Moderator, one of the brains of The Underwearkers on Facebook & a podcast host.

Discussion

markdown guide
 

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

 

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?

 

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 -->
 

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}
 

Fixed it already with this plus the

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

Now the image doesn't show

 

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!

 

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)

 

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

 

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

 

Can you try this.

render(request, "aml/home.html", {'volunteer_name': volunteer_name, })
 

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