NSException error when using Python, Flask, HTML

Question

so I making a website to output projections of nba games. I currently have a dictionary with all of the team logo paths as the key value in the dictionary and the percentages of winning the game as the value. The dictionary called projec_d looks like this:

{
 'static/Portland Trail Blazers.png': '0.20%',
 'static/Milwaukee Bucks.png': '99.80%', 
 'static/New Orleans Pelicans.png': '36.40%', 
 'static/Phoenix Suns.png': '63.60%'
}

in my app.py script the code that uses this dictionary is:

return render_template('home.html', projec_d=projec_d)

The code for the home.html file that should for now just output the logo and the percentage is this:

 {% for item in projec_d.items() %}
      <h3> {{ item }} </h3>
 {% endfor %}

I have also tried:

 {% for key in project_d.keys() %}
      <img src="{{ key }}" alt="">
      <h3> {{ project_d[key] }} </h3>
 {% endfor %}

None seem to work. The error message is very strange. It is a longer than the photo I attached, here is the error: NSException error message

Answer 1

You are using the path to the logo as the key for the percentage. A better way to do this would be a list of dictionaries:

teams = [
    {
        'logo': 'path/to/logo.png',
        'percentage': 53.5%
    },
    {
        'logo': 'path/to/logo2.png',
        'percentage': 25.5%
    }
]

You can access the items like so:

{% for team in teams %}
{{ team['logo'] }}
{{ team['percentage'] }}
{% endfor %}