How to display results of SQLalchemy query correctly in Flask Jinja templates

Question

I am having trouble displaying the results of a SQLAlchemy query correctly in a Jinja template page.

I am basing my project on Formula 1 Drivers and the Teams that they drive for. I have a page which lists the Teams in F1 and it should list the Drivers who race for each individual team (Many-to-Many relationship between Driver and Team classes).

The output I receive is correct, however it appears to be grouped together in a list type output. I would like the drivers for each team to be listed independently as strings rather than a list grouped together.

Here is my code:

models.py

from datetime import datetime
from app import db


class Team_driver(db.Model):
    # Many-to-many relationship table between Driver and Team
    __tablename__ = "team_driver"
    id = db.Column(db.Integer, primary_key=True)
    team_id = db.Column(db.Integer, db.ForeignKey('team.id'), nullable=False)
    driver_id = db.Column(db.Integer, db.ForeignKey('driver.id'), nullable=False)


class Team(db.Model):
    __tablename__ = "team"
    id = db.Column(db.Integer, primary_key=True)
    teamName = db.Column(db.String(64))
    nationality = db.Column(db.String(64))
    # relationship between Team table and Driver table, reference 'team' in forms
    drivers = db.relationship('Driver', secondary="team_driver", backref='team')

    def __repr__(self):
        # specify variables to return to web page from backref
        return '{}'.format(self.teamName)


class Driver(db.Model):
    __tablename__ = "driver"
    id = db.Column(db.Integer, primary_key=True)
    firstName = db.Column(db.String(64))
    lastName = db.Column(db.String(64))
    raceNum = db.Column(db.Integer)
    nationality = db.Column(db.String(64))
    # relationship between Driver table and Team table, reference 'driver' in forms
    teams = db.relationship('Team', secondary="team_driver", backref='driver')

    def __repr__(self):
        # specify variables to return to web page from backref
        return '{} {}'.format(self.firstName,self.lastName)

routes.py (only for specific route)

@app.route('/teamDetails', methods=['GET', 'POST'])
def teamDetails():
    details = Team.query.all()
    return render_template('teamDetails.html',  title='Team Details', details=details)

driverDetails.html

<!-- teamDetails.html -->

<!-- all other html files must now extend index.html and not base.html -->
{% extends "index.html" %}

{% block content %}
    <h1>Team Details</h1>
    {% for d in details %}
    <div><p>Team Name: {{ d.teamName }}<br>Nationality: {{ d.nationality }}
    <br>Drivers: {{ d.driver }}</p></div>
    {% endfor %}
{% endblock %}

Here is the output I get from the webpage

screenshot of webpage output

What I would like is the page to display the relevant drivers, but separately, without the [ ] brackets.

Can anyone help with where I am going wrong?

Many thanks.

Answer 1

Since d.driver is a list of drivers, you should print each item of the list separately, because if you print a list of something, it will also include the brackets.

{% block content %}
<h1>Team Details</h1>
{% for d in details %}
  <div><p>Team Name: {{ d.teamName }}<br>Nationality: {{ d.nationality }}
  <br>Drivers: 
  {% for driver in d.drivers %}
    {{ driver }} 
  {% endfor %}
  </p></div>
{% endfor %}
{% endblock %}