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.
