Using specific values from QuerySet in CSS

[jlc1978]

So as soon as I get it working my colleques want changes.

Question:

Is there a way to get one set of values from a query set into a css style sheet?

my model has 2 attributes - area - the name of the area and area text - its description

I want to use area within 8 shapes in a flexbox, but when I try to format the css I either get both attributes or an empty shape, i.e.:

The relevant code is:

class Area(models.Model):
    area = models.CharField(max_length=30)
    areatext = models.CharField(max_length=400)
   

    def __str__(self):
        return f"{self.area} Purpose: {self.areatext}"

HTML:

        <div class="space"></div>
        <div class="item_context">{{ area.area.0 }}</div>
        <div class="space"></div>
        <div class="item_leadership">{{ area.1 }}</div>
        <div class="space"></div>

It works fine elsewhere, but within a for loop that gets the relevant values and I don’t think a for loop would work.

Is there another way to extract the equivalent of a_area, without a for loop, so I could use a_area.area?

<tr>{% for a_area in area %}</tr>
                <td colspan="7">
                    <div>{{ a_area.area }}</div>
                    <p></p>
                    <div>{{ a_area.areatext}}</div>

I want to avoid having to create a separate list of Areas just for the header.

I also tried prefetching areaheader from a different model but got:

AttributeError: Cannot find ‘areaheader_set’ on Area object, ‘areaheader_set’ is an invalid parameter to prefetch_related()

class Area_Header(models.Model):
    areaheader = models.CharField(max_length=400)
    area = models.ForeignKey(
        Area, on_delete=models.CASCADE, null = True
    )

in views.py:

    areas =  Area.objects.all().prefetch_related('question_set', 'areaheader_set')

If I use:

areas =  Area.objects.all().prefetch_related('question_set', 'area_header_set')

No error but still not text in shape if I use:

<div class="item_context">{{ area.areaheader.0 }}</div>

[KenWhitesell]

I’m sorry, I’m really not understanding what you’re asking for here.

Your title makes reference to changing CSS, but nothing in your templates is referencing style information that I can see.

It might be helpful if you posted the actual HTML that you want to see generated, and then we may be able to help you identify the template commands to produce it.

[jlc1978]

Thanks for the reply. Sorry I was not clear.

What I am trying to do is put the names of the areas (Context…, Leadership, etc.) in the flexbox I am using as a header on each page. It is in my layout.html file which is extended by other files.

I have a table Area that contains the area and a short description, area header. I want to use just the values in area in the flexbox. The reason I have one table with two columns it makes it easier to iterate over it in my HTML files. I can do what I want with a separate table for just areas but seems redundant and means if I make changes I need to remember to do it in 2 places.

I was trying to extract just the areas and then using .x suffix to select which t put where in teh flexbox.

Here is a sample of the rendered page:

The first two is what I want and are rendered if I have a separate table, Area_Topic, using areatopics.0 and .1
The last two is what I get if I try to return just the column “area” from a table, Area, that contain several columns; which is including the (’ and ',) using areaheader.2 and .3

I tried replace but it yields attribute areas even if I convert the QuerySet to a list.

layout.html

  <div class="container" style="top: 5%;">
    
        <div class="item_LoO_Name">
          <div class="t1">{{ project }}</div>
          <div class="t2">{{ projecttext }}</div>
        </div>
        <div class="space"></div>
        <div class="item_context">{{ areatopics.0 }}</div>
        <div class="space"></div>
        <div class="item_leadership">{{ areatopics.1 }}</div>
        <div class="space"></div>
        <div class="item_policy" >{{ areaheader.2 }}</div>
        <div class="space"></div>
        <div class="item_support">{{ areaheader.3 }}</div>
        <div class="space"></div>
        <div class="item_operation">{{ areaheader.4 }}</div>
        <div class="space"></div>
        <div class="item_management">{{ areaheader.5 }}</div>
        <div class="space"></div>
        <div class="item_improvement">{{ areaheader.6 }}</div>
        <div class="space"></div>
        <div class="triangle-right"></div>
        <div class="spaceblank"></div>```

HTML Code Django generated from layout.html

        <div class="space"></div>
        <div class="item_context">Context of the Organization</div>
        <div class="space"></div>
        <div class="item_leadership">Leadership</div>
        <div class="space"></div>
        <div class="item_policy" >(&#x27;Policy and Planning&#x27;,)</div>
        <div class="space"></div>
        <div class="item_support">(&#x27;Support&#x27;,)</div>

views.py

def leadership(request):
    areatopics = Area_Topic.objects.all() # get names of areas for header flow diagram
    areas =  Area.objects.all().prefetch_related('question_set','area_header_set')
    areaheader = Area.objects.values_list('area')

[jlc1978]

I guess my question boils down to:

Why does:

    areaheader = Area.objects.values_list('area')

Return values within (', '), rather than just the text

[KenWhitesell]

Because it’s returning a QuerySet of lists, where each list is a tuple of all the fields being returned.

See the docs for values_list, it shows examples of what’s being returned. (Also see the flat parameter.)

[jlc1978]

Thanks agin for all your help.

It works. I had used flat elsewhere and that’s the challenge learning a programing language - you forget things you used elsewhere; until you just remember to do it.