CS50 Finance - 指数未正确显示投资组合

Question

I am having trouble getting the code to properly display the portfolio in index.html.

My logic with this function is to get a list of all the stocks and cash one user has, and then in a "for" loop, look up the company name and current price for each stock, the total value, and then insert all of that information into a new list of dictionaries (display_portfolio). Then the render_template should display "display_portfolio" with this information, as well as the user's total cash and total value of everything. However, with my current setup, it is displaying the total cash and grand total, but nothing from the individual stocks. I am really not sure why that is, and I am unsure if the issue is in my html or in the flask function itself.

This is the function:

@app.route("/")
@login_required
def index():
    """Show portfolio of stocks"""
    # Retrive portfolio
    portfolio = db.execute("SELECT symbol, SUM(amount) as amount FROM purchases WHERE id = ? ORDER BY symbol", (session["user_id"]))
    user_cash = db.execute("SELECT cash FROM users WHERE id = ?", session["user_id"])
    cash = user_cash[0]["cash"]

    display_portfolio = []
    shares_total = 0

    # loop through portfolio symbols to access name and share price for each symbol
    for row in portfolio:
        requested_quote = lookup(row["symbol"])
        symbol = row["symbol"]
        amount = row["amount"]  #shares
        price = float(requested_quote["price"])
        name = requested_quote["name"]
        share_total = (float(amount) * price)
        shares_total = shares_total + share_total
        display_portfolio.append({'symbol':symbol, 'name':name, 'shares':amount, 'price':price, 'share_total':share_total})

    grand_total = shares_total + cash
    return render_template("index.html", display_portfolio = display_portfolio, cash = cash, grand_total = grand_total)

This is index.html:

{% extends "layout.html" %}

{% block title %}
    Portfolio
{% endblock %}

{% block main %}
<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Shares</th>
                <th>Price</th>
                <th>TOTAL</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td colspan="3"></td>
                <td>TOTAL</td>
                <td>{{ grand_total | usd }}</td>
            </tr>
        </tfoot>

        <tbody>
            {% for row in display_portfolio %}
            <tr>
                <td>{{ display_portfolio.symbol }}</td>
                <td>{{ display_portfolio.name }}</td>
                <td>{{ display_portfolio.shares }}</td>
                <td>{{ display_portfolio.price }}</td>
                <td>{{ display_portfolio.total }}</td>
            </tr>
            {% endfor %}
                <td colspan="3"></td>
                <td>Cash</td>
                <td>{{ cash | usd }}</td>
        </tbody>

    </table>
</div>
{% endblock %}

I should also note, that when I add "| usd" to "display_portfolio.price" in that it reads:

<td>{{ display_portfolio.price | usd }}</td>

I am also getting a completely separate error, and not sure why it would work with cash and not this.

I can confirm that there exists purchases in the sql database the "portfolio" variable is retrieving.

This is what it looks like:

Display

Any help will be appreciated, thanks!

Answer 1

FromMDN doc on tfoot :

Permitted parents: A <table> element. The <tfoot> must appear after any <caption> , <colgroup> , <thead> , <tbody> , or <tr> element. Note that this is the requirement as of HTML5.

Suspect the Cash line is displayed because it is missing <tr> tags.

Nu HTML Validator from W3C is your friend:)