Iterating Through Two Lists in Django Templates

Iterating through two lists in Django templates

It's possible to do

{% for ab in mylist %}
    {{ab.0}}
    {{ab.1}}
{% endfor %}

but you cannot make a call to zip within the for structure. You'll have to store the zipped list in another variable first, then iterate over it.

is there a way to loop over two lists simultaneously in django?

If both lists are of the same length, you can return zipped_data = zip(table, total) as template context in your view, which produces a list of 2-valued tuples.

Example:

>>> lst1 = ['a', 'b', 'c']
>>> lst2 = [1, 2, 3]
>>> zip(lst1, lst2)
[('a', 1), ('b', 2), ('c', 3)]

In your template, you can then write:

{% for i, j in zipped_data %}
    {{ i }}, {{ j }}
{% endfor %}

Also, take a look at Django's documentation about the for template tag here. It mentions all possibilities that you have for using it including nice examples.

Django Template: looping through two lists

In the python view you can zip them together.

view.py

def someview(request):
    list1 = ['Andrew', 'Ben,' 'Charles']
    list2 = [[3, 4, 8], [12, 9], [10, 0, 5, 1]]
    zipped_list = zip(list1, list2)
    return render(request, 'base/home.html', {'zipped_list': zipped_list})

base/home.html

<ul>
    {% for item1 in zipped_list %} <- this is now a tuple with the first element being our first item and the second element being a list
    <li>{{ item1.0 }}
        <ul>
            {% for secondItem in item1.1 %}
                <li>{{ secondItem }}</li>
            {% endfor %}
        </ul>    
    </li>
    {% endfor %}
</ul>

Looping over multiple lists in Django Template

Since this is kind of difficult troubleshoot without creating a django app from scratch, I'm going to be doing a lot of thinking out loud.

First, let's look at your template. You have

 <div class="panel panel-body">
    {% for df in key1 %}
      {% for l in labels %}
        <div class="panel-heading">{{ l }}
          <div class="table-responsive">
            {{ df | safe }}
          </div>
        </div>
      {% endfor %}
    {% endfor %}
</div>

Now, let's set key1 and labels to something simple for this. How about ...

key1 = {'df1' : df1TableHTML, 'df2' : df2TableHTML}
labels = ['label1', 'label2']

Now, let's see how you're for-loops will structure the html.

<div class="panel panel-body">

  <div class="panel-heading"> label1
    <div class="table-responsive">
      df1TableHTML
    </div>
  </div>

  <div class="panel-heading"> label2
    <div class="table-responsive">
      df1TableHTML
    </div>
  </div>

  <div class="panel-heading"> label1
    <div class="table-responsive">
      df2TableHTML
    </div>
  </div>

  <div class="panel-heading"> label2
    <div class="table-responsive">
      df2TableHTML
    </div>
  </div>

</div>

I'm sure at this point you can see where your problem is. Since you are using a nested for-loop, you end up with much more output than you originally wanted. To solve this, you want to iterate over key1 and labels simultaneously.

A pythonic way of doing this is by using the zip() command.

>>> a = ['a','b','c']
>>> b = ['A','B','C']
>>> for x in zip(a,b):
...     print x
... 
('a', 'A')
('b', 'B')
('c', 'C')

However, Django doesn't have a zip equivlent for a template tag. This means you'll have to do this "zipping" server side in your views.py. Do something like below.

...
labels = ['New Plan','New Operation','Current Operation']
html_dict['labels_tables'] = zip(label, list_of_tables)

Then in your template, do this.

<div class="panel panel-body">
  {% for lt in label_table %}
    <div class="panel-heading">{{ lt.0 }}
      <div class="table-responsive">
        {{ lt.1 | safe }}
      </div>
    </div>
  {% endfor %}
</div>

Hopefully this answers your question and sorry for the verbose answer.
Let me know if this works and I'm happy to give you further help if this isn't what you were looking for.

---

Related Topics