Search code examples
pythonhtmlflaskjinja2

Building a dynamic table with jinja2, html and flask


<table style="width:100%", border="1">
        {% for item in items %}    
        <tr>               
            <td>{{Description[item]}}</td>
            <td>{{Location[item]}}</td>
            <td>{{Status[item]}}</td>                
        </tr>
        {% endfor %}    
</table>

I am trying to create a table using this for loop, the variables are being passed through in the flask framework, 'items' will always be the same length as the three lists (Description, location and status). I am aware of the question below: How to build up a HTML table with a simple for loop in Jinja2?

but I can not see how my code here differs to the working answer to this question, is it because I am using a list instead of a dictionary ?

This is the flask framework, where the lists are created an passed through using render template:

def index():
description = []
location = []
status = []
imix80m = ''
imix = ''
with open('behavepretty.json') as a:
    data = json.load(a)
    for n in range(0,len(data)):
        i = 0
        for i in range(0, len(data[n]['elements'])):
            x = data[n]['elements'][i]['name']
            description.append(x)
            y = data[n]['elements'][i]['location']
            location.append(y)
            z = data[n]['elements'][i]['status']
            status.append(z)
        n = 0
    for n in range(0,len(data)):
        if n == 0:
            imix80m = data[n]['status']
        elif n == 1:
            imix = data[n]['status']
a.close()
return render_template('trial.html', Description = description, Location= location, Status = status, result1 = imix80m, result2 = imix, jfile = data, items = description)

Solution

  • You just need a loop counter:

    <table style="width:100%", border="1">
            {% for item in Description %}    
            <tr>               
                <td>{{Description[loop.index0 ]}}</td>
                <td>{{Location[loop.index0]}}</td>
                <td>{{Status[loop.index0]}}</td>                            
            </tr>
            {% endfor %}    
    </table>
    

    Or, you could pack the 3 into a list of lists:

    my_list = [[Description0, Location0, Status0], [Description1, Location1, Status1], ...]
    

    Then:

        {% for item in my_list %}    
            <tr>               
                <td>{{ item[0] }}</td>
                <td>{{ item[1] }}</td>
                <td>{{ item[2] }}</td>                            
            </tr>
        {% endfor %} 
    

    Or, more robustly, a list of dictionaries:

    my_list = [
        {
            "description" : xxx, 
            "location" : yyy, 
            "status" : zzz
        },
        {
            "description" : www, 
            "location" : eee, 
            "status" : rrr
        },
        ...
    ]
    

    Then:

        {% for item in my_list %}    
            <tr>               
                <td>{{ item.description }}</td>
                <td>{{ item.location }}</td>
                <td>{{ item.status }}</td>                            
            </tr>
        {% endfor %}