Flask: Template file cannot fetch from locally stored .json file in another directory

Question

I'm trying to create a chatroom application using Flask and update the chat via AJAX calls. I'm storing all of my chat messages in a JSON file in the root directory ('root/chat_data.json') that looks like this:

{
    "id": 0,
    "room": "user1room",
    "owner": "user1",
    "messages":
    [
        {
            "sender": "admin",
            "text": "this should pop up first in user1room!",
            "date": "[2024-01-01 12:00:01]"
        },
        {
            "sender": "admin",
            "text": "this should pop up second in user1room!",
            "date": "[2024-01-01 12:30:01]"
        }
    ]
}

I'm able to retrieve and display the list of pre-existing chats for a given chatroom in Flask just fine, but I'm having trouble actually posting messages by writing to the .JSON file. My current implementation in root/templates/chat.html uses this form

<form action="javascript:sendMessage()" method="post">
    <dl>
        <dt>Message
        <dd><input type="text" id="msgContent" name="newMessage">   
        <dd><input type="submit" id="sendMsg" value="Send Message">
    </dl>
</form>

To call this function in a script tag that will eventually append the input to the JSON file

<script>
    async function sendMessage()
    {
        const response = await fetch('../chat_data.json', {
        dataType: 'json',
        headers: {
            'Accept': 'Application/json',
            "Content-Type" : "Application/json",
        }}).then(response => response.json())
        .then(function(chat_data) {
            console.log(chat_data);
        });
    };
</script>

As you can see, I'm just trying to receive and print out the chat data as of right now, but I keep getting a 404 error when I try fetching '../chat_data.json'. I've also tried './chat_data.json', '/chat_data.json', and any other permutations of relative file path access. Where is chat_data.json stored when I run my application and how can I properly access it?

Additionally, I'm also getting another error that states "

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON".

I know this means that fetch is returning HTML, but how can I get it to properly return JSON once I'm able to access chat_data.json?

As I said, chat_data.json is in the root directory and the html file (chat.html) is at templates/chat.html. Thanks!