CODEWITHSUNDEEP
javascripthtmljson
Vianpyro
Vianpyro

Reputation: 75

How to fix 'Unexpected token < in JSON at position 0'?

I'm trying to share a website I've done using GitHub pages, but I'm having troubles loading the JSON files.

This is for a friends game server website, using HTML 5, JavaScript and JSON, I've tried running it from localhost and it worked perferctly fine. The issue actually is a SyntaxError : Unexpected token < in JSON at position 0 and when I try to look for the JSON file in chrome debugger I can't see my JSON files to check where the probleme could be coming from.

The JSON file :

{
    "header_menu_games": "Games",
    "header_menu_home": "Home",
    "header_menu_rules": "Rules",
    "header_menu_support": "Support",
    "header_serverip_text": "Server ip:",
    "header_serverip_copy_btn": "Copy"
}

The JavaScript code I use to translate :

if (isLanguageAvailable) {
    var myRequest = new Request(`../../src/lang/${userLang}.json`);
    console.info(`User language (${userLang}) is available`);
} else {
    var myRequest = new Request("../../src/lang/en.json");
    console.info(`The user language (${userLang}) is unfortunately not available`);
}
console.log(myRequest);

fetch(myRequest)
    .then(resp => {
        resp.json()
            .then(data => {
                document.getElementById("lang-header_serverip_text").innerHTML = data.header_serverip_text;
            })
            .catch(err => {
                console.error(err);
            });
    })
    .catch(err => {
        console.error(err);
    });

Console error:

console_error

JavaSript catch error:

js_catch_error

The full code is available on GitHub.

Upvotes: 0

Views: 7243

Answers (1)

Jacob Helton
Jacob Helton

Reputation: 173

I believe you're receiving a 404 error because you're pointing your link at the repository location instead of the actual content. You were linking to a nonexistent link: https://vianpyro.github.io/src/lang/en.json

You can do this one of two ways:

  1. Link to the raw version of the file from the repository

  2. Point at the correct location from your friend's domain

1. Linking to the Raw Version

In github, click on Raw and it should open a page containing the actual JSON.

Screenshot of Github

You'll see that the actual link to the content is: https://raw.githubusercontent.com/Vianpyro/Aycraft/master/src/lang/en.json

2. Linking to the hosted location

Part of your original problem was that you weren't pointing at the right path. Your friend's site is hosted at https://vianpyro.github.io/Aycraft and not https://vianpyro.github.io/.

This means that the base url of the site is https://vianpyro.github.io/Aycraft and everything in the path has to follow that. You have to include the /Aycraft after the domain name since that is the baseurl of the site.

The correct url would be: https://vianpyro.github.io/Aycraft/src/lang/en.json

Upvotes: 2

Related Questions