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.

What you've posted is valid JSON - Chrome is probably busted, have you tried a browser that isn't busted? — Jaromanda X
– Jaromanda X, Commented Oct 8, 2022 at 5:31
While I would love nothing more than to not use chrome, I'm making this site for a friend who insists on using chrome, so unfortunately not an option. EDIT: Just tested in Firefox, problem still exists. — Spebby
– Spebby, Commented Oct 8, 2022 at 5:33
your code works fine anyway - jsfiddle.net/ph1w2jnd - the error ("directory"\flashcards.json:2:14) suggests you're loading the JSON in a script tag to be honest - just tried it, and that seems to be exactly what you are doing — Jaromanda X
– Jaromanda X, Commented Oct 8, 2022 at 5:35
perhaps you should check WHAT is actually causing the error rather than assuming it's the XMLHttpRequest (specifically, the JSON.parse in the onload callback) - because it's not the XMLHttpRequest that is causing the error — Jaromanda X
– Jaromanda X, Commented Oct 8, 2022 at 5:41
@RockySims - you'd think so, except JSON.parse doesn't give a fig about \n — Jaromanda X
– Jaromanda X, Commented Oct 8, 2022 at 5:52

buddemat · Accepted Answer · 2022-10-12 06:16:33Z

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!

edited Oct 12, 2022 at 6:16

buddemat

5,33016 gold badges37 silver badges61 bronze badges

answered Oct 8, 2022 at 6:00

Spebby

215 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON Syntax Error only when parsing in Browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related