0

I have a table displayed inside a collapsible, accordion style card component that contains three Fielditems (one per<td>). Using a forloop.counter, I am trying display each obj.frequency as the collapsible-header with all of the associated obj.product and obj.price items displaying within the collapsible-body.

I recognize the current layout needs to be DRY-er by only using the object.rate_set.all loop once. I left the two obj forloops since this is the only way I can get the data within the collapsible-body section of the card, even though the data is not separated correctly.

Question: How can I display the data associated with frequency inside a card body with the frequency obj output as the header?

In addition to my template, a screenshot of my browser is included below for clarification if needed

My Template:

 <div class="card">
   <div class="card-body">
      <ul class="collapsible popout">

        {% for obj in object.rate_set.all %}
        <!-- -------------------------------------------------
             displays each `frequency` obj in its own accordion card 
             as the header. output: 1x, 3x, 6x, 12x, 24x.. 
             ------------------------------------------------- -->
          {% if forloop.counter|divisibleby:3 %}
            <li>
              <div class="collapsible-header“>{{ obj.frequency }}</div>
                <div class ="collapsible-body">
          {% endif %}
        {% endfor %}

                  <div class="table-responsive card-text">
                    <table>
                      <thead>
                        <tr>
                          <th>Product</th>
                          <th>Rate</th>
                        </tr>
                      </thead>
                      <tbody>
                      <!-- -----------------------------------
                        displays all of the obj's in the last 
                        accordion card (24x)
                        ------------------------------------- -->
                       {% for obj in object.rate_set.all %}
                          <tr>
                            <td> {{ obj.product }} </a>
                            <td>${{ obj.price }}</td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                   </div>
                  </div> <!–- end of ‘collapsible-body' -->         
               </li>
            </ul>
         </div>
     </div>

enter image description here

2

1 Answer 1

0

Based on @DisneylandSC's response- below is the updated working template:

<div class="card">
  <div class="card-body">
    {% regroup object.rate_set.order_by by frequency as frequency_list %}
    <ul class="collapsible popout">
      {% for frequency in frequency_list %}
        <li>
          <div class="collapsible-header">
            <i class="material-icons">view_day</i>{{ frequency.grouper }}&nbsp;Frequency Rate
          </div>
          <div class="collapsible-body">
            <div class="table-responsive card-text">
              <table class="table highlight">
                <thead>
                <tr>
                  <th>Product</th>
                  <th>Price</th>
                </tr>
                </thead>
                <tbody>
                {% for item in frequency.list %}
                  <tr>
                    <td>
                      <a class="nav-link" href="#">
                        {{ item.product }}
                      </a>
                    </td>
                    <td>${{ item.price }}</td>
                  </tr>
                {% endfor %}
              </table>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.