Q: How to transfer information via file from Python to JavaScript? I'm currently trying to code a basic text-based GUI for a website so that people with access to the site's files who don't know how to code can edit a few predefined website sections with relative ease. To do so, I created a python file and got to work. I found that JSON was supposedly a good way to communicate information between the python script and the JavaScript script, so I implemented it in the python script without so much as a hitch. Python was now flawlessly packaging (trusted) user inputs into the JSON file.
I then turned to the JavaScript. Getting as far as I have has taken a mental toll on me. I was able to import the JSON via async function (see below) and It worked perfectly. The JSON data was in the JavaScript. However as soon as I did so, the const p = document.getElementById("jsTest"); in the getDateTime() function started to suddenly return null. I got on to troubleshooting, and found that items on index.html could be accessed via this command, however any other page would return null. I did some more research/troubleshooting, found multiple dead ends, and have come out completely fruitless.
At this point I've hit a wall, and while I've had a bad track record on here, I'm out of options. Have I used a bad method of communication or un-packaging? I'm rather new to web development and JavaScript, so any help would be greatly appreciated.
EDIT: To clarify further I'm looking for something that could satisfy the requirements of the project, not just how to fix my JSON issue. If a better way to communicate between python and JS dynamically exists, I would very much like to use that instead of JSON. I believe having these answers would also be in the best interests of anyone finding this question years in the future, rather than being directed to a question focusing purely on the JSON.
Relevant code:
async function populate() {
    //get the JSON file into JS
    const requestURL = './dates.json';
    const request = new Request(requestURL);
    const response = await fetch(request);
    const jsonStuff = await response.json();

    //Run the following function passing the JSON through it
    getDateTime(jsonStuff);
}

function getDateTime(jsonThing) {
    //unpackage the JSON into variables
    var game = jsonThing["game"];
    var gameS = jsonThing["gameS"];

    console.log(game);
    console.log(gameS);

    //Get element reference
    const p = document.getElementById("jsTest");
    console.log(p);

    p.textContent = gameS;
}

(the jsTest id is attached to an h3 on a non index.html page)
JSON contents (inside dates.json):
{
    "game": [
        "02;11;2022"
    ],
    "gameS": [
        "feb 11"
    ]
}

HTML for context: (in games.html, not index.html)
<!DOCTYPE html>
<html>
    <body class="Games">
        <h3 id="jsTest">Javascript Died, sorry.</h3>
    </body>
    <script type="text/javascript" src="../script.js"></script>
</html>

Please let me know if I missed any code that pertains to this issue.
