title: How to make dropdown list change a table data with Jinja2 + Flask
body: <p>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.</p>
  
  <p>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:</p>
  
  <ol>
  <li>The user selects a Driver and goes to webapp.com/driver/<strong>someDriver</strong></li>
  <li>The <strong>someDriver</strong> page has a dropdown list with ALL Races the <strong>someDriver</strong> has been through</li>
  <li>User selects <strong>someRace</strong> from dropdown list</li>
  <li>Table is fed by  <strong>someRace</strong>'s results</li>
  </ol>
  
  <p>The python flask route I wrote for it:</p>
  
  <pre><code>@app.route('/driver/&lt;driverid&gt;')
  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)
  </code></pre>
  
  <p>Now I'm trying to make a dynamic template that changes the Result table everytime the user change the selection. </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;form name="racesForm"&gt;
          &lt;label for="selRace"&gt;Escolha uma corrida!&lt;/label&gt;
          &lt;select class="form-control" id="selRace"&gt;
              {% for race in racesList %}
              &lt;option value="{{race.filename}}"&gt;
                  {{race.filename}}
              &lt;/option&gt;
              {% endfor %}
          &lt;/select&gt;
      &lt;/form&gt;
      &lt;hr&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;table&gt;
          &lt;thead&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Driver&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              {% position, drivername in race.finalresult %}
              &lt;th&gt;{{position}}&lt;/th&gt;
              &lt;td&gt;{{drivername}}&lt;/td&gt;
              {% endfor %}
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But now I'm receiving a error: </p>
  
  <pre><code>Encountered unknown tag 'position'.
  </code></pre>
  
  <p>And that's it..I'm not sure of how to make this dropdown list change the table dynamically. Any insights 'd be aprecciated.</p>
  
  <p><strong>UPDATE//Giving more info:</strong>
  Driver is a very simples dict/json that has two keys ['name'] and ['_id']</p>
  
  <p>racesList is an array of many "raceItem"s.</p>
  
  <p>Each "raceItem" has a key anmed 'finalresult' that has data of the positions each driver has finished.</p>
  
  <p>this array is filled with many objects it may seem like the example below:</p>
  
  <pre><code>'finalresult': [
  {'position': 1,
  'drivername': 'John Doe'},
  'position': 2,
  'drivername': 'Foo Bazz', etc
  }]
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>