JSON Syntax Error only when parsing in Browser

Question

I'd like to preface by saying I'm pretty new to JS, though I've been using JSONs for awhile with other programming languages.

I've been trying to get a pass some data in a JSON to a JS script, and then getting that into an HTML file. My issue right now is coming from the browser. Originally I was going to just load the JSON locally, but I learned I'd have to get it from a web request as to my knowledge, browsers don't support locally loading. I put my JSON on GitHub and referenced the raw via url. However, when I go to debug, of all things I get a Syntax error, which does show in Chrome's debugging terminal.

Uncaught SyntaxError SyntaxError: Unexpected token ':' at (program) ("directory"\flashcards.json:2:14)

image of error in chrome's terminal

What's weird is that I'm getting no errors in VSCode, and I've written a JSON enough times to know that it's not improper syntax.

{
    "flashcards":
    [
        {
            "context": "Derivatives",
            "front": "f´(sinx)",
            "back": "cosx"
        },
        {
            "context": "Derivatives",
            "front": "f´(cosx)",
            "back": "-sinx"
        }
    ]
}

The code that loads this JSON looks like this.

function loadFlashcards() {
    var request = new XMLHttpRequest();
    request.open('GET', 'https://raw.githubusercontent.com/Spebby/Calculus-Revision/main/flashcards.json', true);
    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            // Success!
            var jsonData = JSON.parse(request.responseText);
            for (var i = 0; i < jsonData.flashcards.length; i++) {
                var card = jsonData.flashcards[i];
                var flashcard = new Flashcard(card.context, card.front, card.back);
                console.log("Flashcard created: " + card.context, card.front, card.back);
                cards.push(flashcard);
            }
        } else {
            // We reached our target server, but it returned an error
            console.log("Error loading flashcards");
        }
    };
    request.onerror = function() {
        // There was a connection error of some sort
        console.log("Error loading flashcards");
    };
    request.send();
}

If anyone knows what's causing this issue, please let me know. I'm also more than happy to refactor loadFlashcards() if there's a better way to do what I'm trying to do.

Answer 1

Jaromanda X Pointed out that the error I was getting suggested the error was actually coming from the HTML side. They suggested that the error was due to loading the JSON in a script tag. I forgot I had even done this, but after checking it was there and removing it, the error vanished. Thank you again Jaromanda!