How to build an HTML table using a for loop in Flask?

user_13100489 0
Viewed 508

I am trying to create a table on a webpage using python and flask. I have two lists, testing_sketches and split_reconstructions.

testing_sketches: It is a list of size 14, containing 14 image addresses.

split_reconstructions: It is a list of lists containing 14 lists of length 20. Basically, there are 20 image addresses corresponding to each of the 14 images in the previous list. This means it includes 20 image addresses for each image address in testing_sketches.

I am trying to iteratively take an image from testing_sketches and display its 20 images in split_reconstructions on its right. Something like the following:

enter image description here

And I have tried to implement it using the following code:

<body>        
    <h2 style="margin-left: 1.5%;">Iterative Reconstructions</h2>
    {% for i in range(len(testing_sketches)) %}
            <br>
            <br>
            <h3 style="margin-left: 10%;">{{ i+1 }}.</h3>
            <center><table border="1">
            <COLGROUP>
            <COL width="100"><COL width="100">
            <THEAD>
            <tr>
                <td><center><b>Image<b></center><a href={{  testing_sketches[i] }} title="Input" class="thickbox"><img src={{  testing_sketches[i] }} alt="Sorry, No Display!" border="0"/></a></td>
                {% for j in range(20) %}
                <td><center><b>Reconstruction-{{ j }}<b></center><a href={{  split_reconstructions[i][j] }} title="Reconstructed-{{ iter_count }}" class="thickbox"><img src={{  split_reconstructions[i][j] }} alt="Sorry, No Display!" border="0"/></a></td>
                {% endfor %}
            </tr>
            </table></center>
    {% endfor %}   
    
</body>

But this results in a blank result, no alternate display, no error, just an empty result. I have tried to check the length of the lists that I am passing on, and all of them are non-empty and have correct image addresses of the form: static/test_reconstructions/images/image_04666_img.png (an example of one of the addresses)

I pass the lists and the functions used in the app.py file as follows:

@app.route('/')
def home():

    return render_template('iterative_reconst.html', testing_sketchs=testing_sketchs, split_reconstructions=split_reconstructions, 
    len=len, range=range)
flask jinja2 html python
1 Answers

If I understood you correctly, you want a table for each entry in the first list. This table shall have the number of columns corresponding to the entry in the respective second list, headed by the entry in the first list.

For this jinja2 provides the filter length and loop indices. Your code would look something like this.

{% for sketch in testing_sketches %}
<table>
  <thead>
    <th>Image</th>
    {% for i in range(split_reconstructions[loop.index0] | count) %}
    <th>Reconstruction-{{i+1}}</th>
    {% endfor %}
  </thead>
  <body>
    <tr>
      <td>{{ sketch }}</td>
      {% for addr in split_reconstructions[loop.index0] %}
      <td>{{ addr }}</td>
      {% endfor %}
    </tr>
  </tbody>
</table>
{% endfor %}
user_137080220
Related