Whenever I put a {{example}} in a div, it leaves the text blank. (Flask)

Question

I'm currently trying to make a site that has some info that updates every once in a while with flask. When I run my python script, the CSS and HTML work perfectly. However, if I try to return a variable to my HTML and attempt to use it there, the text is just blank. My flask file and project layout seem to be mostly the same as a previous project, so I don't really know what's going on. Some help would be greatly appreciated!

Python-

import flask
from flask import Flask, render_template
import bs4
import requests
import json

app = Flask(__name__)

url = 'https://covidtracking.com/api/v1/states/PA/current.json'

payload = {}
headers = {}

response = requests.request("GET", url, headers=headers, data=payload)

penndata = response.json()

positivecases = penndata['positive']
# negativecases = penndata['negative']
hospitalized = penndata['hospitalizedCurrently']
ventilator = penndata['onVentilatorCurrently']
deaths = penndata['death']

print(penndata)

@app.route("/")
def home():
    return render_template("template.html", posititivecases=positivecases, hospitalized=hospitalized, ventilator=ventilator, deaths=deaths)

if __name__ == '__main__':
    app.run(host='0.0.0.0')

part of the HTML-

<div class="flex-container">
  <div class="flex-child">
      Cases
      <p class="casesp">{{positivecases}}</p>
  </div>
  <div class="flex-child">
      Deaths
      <p class="deathsp">9999</p>
  </div>
  <div class="flex-child">
      Hospitalized
      <p class="hospitalizedp">9999</p>
  </div>
  <div class="flex-child">
      On ventilator
      <p class="ventilatorp">999</p>
  </div>
</div>

You had a minor typo `posititivecases=positivecases`, extra `ti` in the argument; otherwise your code works. — metatoaster, May 22 '20 at 13:00
@mechanical_meat OP actually did provide a working minimum example that demonstrated the problem they had. It was a minor typo, where `positivecases=positivecases` was incorrectly written as the above. — metatoaster, May 22 '20 at 13:01
@metatoaster: ah, thank you for spotting that! My mistake. I've deleted my comment. — mechanical_meat, May 22 '20 at 13:04
Also, given that the JSON data is provided relatively cleanly, you can use [keyword argument expansion](https://stackoverflow.com/questions/36901/what-does-double-star-asterisk-and-star-asterisk-do-for-parameters/26365795#26365795) and call `render_template("template.html", **penndata)` instead to save on typing out every variable, but you do need to ensure the template reference the correct key (i.e. change `{{positivecases}}` to `{{positive}}`) — metatoaster, May 22 '20 at 13:05
metatoaster answered my question- I had a typo in my "return render_template" thank you for the other data as well! — Xinyun Zhou, May 22 '20 at 13:06
@metatoaster you can post an answer so I can mark it as the answer if you want — Xinyun Zhou, May 22 '20 at 13:09
Unfortunately, this question may be considered [off-topic](https://stackoverflow.com/help/on-topic) as this issue was _caused by a simple typographical error_. — metatoaster, May 22 '20 at 13:13

score 0 · Accepted Answer · answered May 22 '20 at 13:06

Try the simple process of elimination.

Check the template rendering is working. Use a hard-coded string, if it renders correctly, then {{positivecases}} is not evaluating correctly in the HTML.
Check if the problem lies in the way you're passing the values to the render_template function. Try something simpler, e.g., .render_tempate('template.html', a=1) and then use a in the template.

In general, when something does not work, try something simpler. Most problems in programs is trying to do too much at once, without understanding what each part of the code does. In order to cope with this, simply comment out parts of the program and see the results until you understand every line of the code.

This is a general process that works on every program, language, framework. It's slow and painful but it will help you build intuition about how to troubleshoot simple problems like this one, and will also build your confidence troubleshooting really complicated problems.

Whenever I put a {{example}} in a div, it leaves the text blank. (Flask)

1 Answers1