Building a html table in jinja form dict of list

Question

I have a long dictionary of data which looks like this,

('Item', 8): Components_data(base_quantity=63.0, items_data={'830927': [1.0, 14.851799999999999], '831103': [0.37170000000000003, 0.6972720300000002]}, price_labor=374.21824212, total=389.76731415)}

The key is a tuple and my values are in a namedtuple, with 3 integers and 1 dictionary where keys are strings and values are integers.

I want to use those values to build an Html table dynamically using jinja: the result I want need to look like this:

Where the rows of components, Qty and Price unit are generated automatically according to the values of items_data in Componnents_data field.

here is what I have tried so far with jinja :

<table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Level</th>
                            <th>Item</th>
                            <th>Component</th>
                            <th>Qty</th>
                            <th>Price Unit</th>
                            <th>Price Total</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item, components_data in prices.items() %}
                        <tr>
                            <td rowspan="3">{{item[1]}}</td>
                            <td rowspan="3">{{item[0]}}</td>
                        </tr>
                        {% for sub_components, sub_comp_dat in components_data.items_data.items()%}
                        <td>{{sub_components}}</td>
                        <td>{{ sub_comp_dat[0] }}</td>
                        <td>{{ sub_comp_dat[1] }}</td>
                        <td>{{ components_data.price_labor }}</td>
                        <td>{{ components_data.total }}</td>
                        </tr>
                        {% endfor %} {% endfor %}
                        <tr>
                            <td colspan="3" id='total-label'>Total</td>
                            <td colspan="4" id='total-value' text-align='right'>july</td>
                        </tr>
                    </tbody>
                </table>

And the results looks like this :

I have tried every tip I know but cannot get the expected results, Any Help is welcome. Thanks

Answer 1

I do not know the jinja syntax, but you can easily achieve your purpose storing a boolean value to check if the total has been already written.

e.g.:

 {% for item, components_data in prices.items() %}
    <tr>
        <td rowspan="3">{{item[1]}}</td>
        <td rowspan="3">{{item[0]}}</td>
    </tr>
    //set the flag to false
    isFirstTime = false
    {% for sub_components, sub_comp_dat in components_data.items_data.items()%}
        <td>{{sub_components}}</td>
        <td>{{ sub_comp_dat[0] }}</td>
        <td>{{ sub_comp_dat[1] }}</td>
        //show the price only the first time
        if( isFortTime)
        {
            isFistTime = true;
            <td rowspan="3">{{ components_data.price_labor }}</td>
            <td rowspan="3">{{ components_data.total }}</td>
        }
        </tr>
    {% endfor %} 
{% endfor %}

Again this is not the correct syntax but you can achieve this with no problem.

---

Documentation:

Assign a variable in the template

If Statement

Answer 2

Thanks again @Alessandro.Vegna answer for the intuition of using if else statement.

It can be achieved according to this answer by using namespaces: in jinja 2.0

here is the answer :

<tbody>
                        {% for item, components_data in prices.items() %}
                        <tr>
                            <td rowspan="3">{{item[1]}}</td>
                            <td rowspan="3">{{item[0]}}</td>
                        </tr>
                            {% set time = namespace(first=False) %}
                            {% for sub_components, sub_comp_dat in components_data.items_data.items() %}
                             <tr>
                            <td>{{sub_components}}</td>
                            <td>{{ sub_comp_dat[0] }}</td>
                            <td>{{ sub_comp_dat[1] }}</td>
                            {% if not time.first %}
                                {% set time.first = True %}
                            <td rowspan="3">{{ components_data.price_labor }}</td>
                            <td rowspan="3">{{ components_data.total }}</td>
                        {% endif %}
                        </tr>
                        {% endfor %} {% endfor %}
                        <tr>
                            <td colspan="3" id='total-label'>Total</td>
                            <td colspan="4" id='total-value' text-align='right'>july</td>
                        </tr>
                    </tbody>