How to edit HTML Website Information from Python String

Question

I'm gonna present you my current situation and then I'll go into detail.

---

• Currently I have a Python Script which calls an API which retrieves a JSON. Inside the python script I already formatted the json string, meaning I have variables which contain strings.

• Secondly I have an HTML Website with CSS and JS included etc. I already put down a few divs and hr, to design the layout.

THE GOAL: is that once I open the HTML Website, it automatically executes the python script and fills out the areas where I want to put data in.

---

My Python script sends a request to an API which gives me a JSON back where I specifically want the Value "rocket type" from the JSONObject "rocket":

import requests
url = 'https://api.spacexdata.com/v2/launches/latest'
headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'}
response = requests.get(url,headers).json()
print("----------------------")
print(response["rocket"]["rocket_type"]) #This is what I meant above with JSONObjects etc...

To give you an idea of how the JSON String looks like :

{
  "flight_number": 66,
  "mission_name": "Iridium NEXT Mission 7",
  "launch_year": "2018",
  "launch_date_unix": 1532518766,
  "launch_date_utc": "2018-07-25T11:39:26.000Z",
  "launch_date_local": "2018-07-25T04:39:26-07:00",
  "rocket": {    <---- Remember this? My python script wanted to jump into this object via ["rocket"]
    "rocket_id": "falcon9",
    "rocket_name": "Falcon 9",
    "rocket_type": "FT", <---- Remember this? My python script wanted exactly this value via ["rocket_type"]
    "first_stage": {
      "cores": [
        {
          "core_serial": "B1048",
          "flight": 1,
          "block": 5,
          "reused": false,
          "land_success": true,
          "landing_type": "ASDS",
          "landing_vehicle": "JRTI"
        }
....

My HTML Website is pretty boring, just Divs and other tags so there's no need to add that entirely here. But to give you an example of what I want to archive:

This is a div with a paragraph tag for example. I want to tell the HTML to edit the value of the

tag to the response variable from my python script (rocket_type, remember?).

<div class ="boringDiv"><p> EDIT ME TO THE STRING OF A PYTHON VARIABLE! </p></div>

So now we need to replace "EDIT ME TO THE STRING OF A PYTHON VARIABLE" to the value of the python variable "response" which contains the value "FT".

I have no idea where to start (which is why I'm asking), but I would start by making an EXECUTION ORDER: 1. Python; 2. HTML....

Answer 1

You could use a tool called jinja to populate your HTML in a very clean manner. It'd look something like this

<div class ="boringDiv"><p>{{ rocket_type }}</p></div>