How to make dropdown list change a table data with Jinja2 + Flask

Question

I'm using Jinja2 Template to change dynamically a result table for my Motor Racing webapp. It's not perfect, but I'm making my way with patience.

I have a template that is rendered by the URL 'webapp.com/driver/' that's supposed to show the results of a Race where the driver was present inside a table. To make it clear:

The user selects a Driver and goes to webapp.com/driver/someDriver
The someDriver page has a dropdown list with ALL Races the someDriver has been through
User selects someRace from dropdown list
Table is fed by someRace's results

The python flask route I wrote for it:

@app.route('/driver/<driverid>')
def driver(driverid):
    driver = db.Drivers.find_one({'_id': ObjectId(driverid)})
    races = db.Races.find({'finalresult.driver':driver['unique_name']}).sort([('timestamp', -1)])
    racesList = []
    for race in races:
        raceItem = {
            'filename':race['filename'],
            'date':datetime.datetime.fromtimestamp(float(race['timestamp'])).strftime('%d-%m-%Y'),
            'finalresult':race['finalresult'],
            'id':str(race['_id'])}

        racesList.append(raceItem)
    return render_template('user.html', driver=driver, racesList=racesList)

Now I'm trying to make a dynamic template that changes the Result table everytime the user change the selection.

<div class="row">
    <form name="racesForm">
        <label for="selRace">Escolha uma corrida!</label>
        <select class="form-control" id="selRace">
            {% for race in racesList %}
            <option value="{{race.filename}}">
                {{race.filename}}
            </option>
            {% endfor %}
        </select>
    </form>
    <hr>
</div>

<div class="row">
    <table>
        <thead>
        <th>Position</th>
        <th>Driver</th>
        </thead>
        <tbody>
        <tr>
            {% position, drivername in race.finalresult %}
            <th>{{position}}</th>
            <td>{{drivername}}</td>
            {% endfor %}
        </tr>
        </tbody>
    </table>
</div>

But now I'm receiving a error:

Encountered unknown tag 'position'.

And that's it..I'm not sure of how to make this dropdown list change the table dynamically. Any insights 'd be aprecciated.

UPDATE//Giving more info: Driver is a very simples dict/json that has two keys ['name'] and ['_id']

racesList is an array of many "raceItem"s.

Each "raceItem" has a key anmed 'finalresult' that has data of the positions each driver has finished.

this array is filled with many objects it may seem like the example below:

'finalresult': [
{'position': 1,
'drivername': 'John Doe'},
'position': 2,
'drivername': 'Foo Bazz', etc
}]

As I told before, I want this data to be displayed in a table, depending on what RACE has been selected from the "raceList" dropdown list.

As a solution, I'm thinking of creating a new routing...but I wanted this routing to be displayed in the same page. I don't want the user to be directed to a new window.

Probably there are no records for the selected driver? in this case refer stackoverflow.com/a/34839762/2196316 for checking if key is in the object... debug by logging / printing the data in local console from where you are running the app to check the response set from Mongo.. — Farhan
You forgot 'for' statement : {% position, drivername in race.finalresult %} and you can't use it like that. Use {% for position in race.finalresult %} — Calumah
What is the race in race.finalresult? What is the structure of Races collection? You have to provide all the details when you post a question. — Chamath
I just updated the question with some more info. Sorry to let you without news that whole time — Ramon Barros
Guys, I found that maybe the right way to do that is by creating a POST routing and by making the form able to POST data. What do you think about it? — Ramon Barros

Chamath Chamath · Accepted Answer · 2018-02-14T05:41:22

First of all, you are getting Encountered unknown tag 'position' as you are using a different data structure. As you mentioned finalresult is a list of dicts. So you need to iterate through it when populating your table.

{% for driver_stat in race.finalresult %}
    <td>{{driver_stat.position}}</td>
    <td>{{driver_stat.drivername}}</td>
{% endfor %}

But with your approach, this table will not be updated dynamically as you select different race from your dropdown. Instead I suggest to use jquery. So you don't have to nevigate to another page to display the driver stats. I found several useful SO question that have been already answered on this. Follow them.

Ref:

How to make dropdown list change a table data with Jinja2 + Flask

1 Answers