CS50 PSET 7 Survey

Question

After reviewing Lecture 7 and the Lecture 7 notes several times, I am still having a bit of trouble with displaying the data from the CSV file into a table. The data is actually being displayed ABOVE the table header. My /sheet (or sheet.html) look like this:

{% block main %}

<table class="table">
    <thead class="thead-dark">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Favourite Book</th>
          <th scope="col">Next Favourite Book</th>
          <th scope="col">Choice from list</th>
        </tr>
    </thead>
    <tbody>
        {% for line in data %}
            {% for element in line %}
                <tr> {{ element }} </tr>
            {% endfor %}
        {% endfor %}

    </tbody>
</table>

The get_sheet() function is pretty straightforward:

@app.route("/sheet", methods=["GET"])
def get_sheet():
    file = open("survey.csv", "r")
    reader = csv.reader(file)
    data = list(reader)
    return render_template("sheet.html", data=data)

Any thoughts on why the data is being displayed above the table layout?

A screenshot of what is happening:

Answer 1

Not sure whether that's the explanation for this particular rendering, but your table is missing columns. You define a bunch of "table row"s (oddly one per value), but you are missing the "table data" elements inside. The code

            {% for element in line %}
                <tr> {{ element }} </tr>
            {% endfor %}

should probably be more like

            <tr>
            {% for element in line %}
                <td> {{ element }} </td>
            {% endfor %}
            </tr>