Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:8:42

Question

I am attempting to create a ROBLOX asset id returner using this api. I am using the product info function / api get request. I have made a script, but I continually get the error Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:8:42 when I am extremely close to finishing.

Would someone be able to please help, I would be so grateful!

I'll link my code below.

JavaScript Code

function convert()
{
    var input = document.getElementById("AssetConverterArea").value;
    var output = document.getElementById("assetIdReturn");
    var webRequest = fetch('https://api.roblox.com/marketplace/productinfo?assetId=' + input, {'mode': 'no-cors'});
    var assetId = webRequest.AssetId;

    webRequest.then(responce => responce.json()).then(d => {
            console.log(responce)
            assetId = d.AssetId;
        });

    if (assetId === undefined)
    {
        output.innerHTML = "Invalid Asset ID";
    } else {
        output.innerHTM = 'Your asset ID is: ' + assetId;
    }
}

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="icon" type="image/x-icon" href="Media/assetid.png">
    <link rel="stylesheet" href="style.css">

    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <nav>
            <ul class="navLinks">
                <li class="navLink"><a href="index.html" class="navHref">Home</a></li>
                <li class="navLink"><a href="credits.html" class="navHref">Credits</a></li>
                <li class="navLink"><a href="about.html" class="navHref">About</a></li>
            </ul>
        </nav>

        <span class="favicon"><img src="Media/assetid.png" alt=""></span>
    </header>

    <div class="line"></div>

    <h1 class="title">Asset Converter</h1>

    <p class="description">
        This website is a simple tool to convert your Roblox decal & library IDs into Roblox Asset IDs. <br><span style="font-weight: 800;"> Thank you for checking out the website!</span>  
    </p>
        
    </p>

    <div class="AssetDiv"><textarea placeholder="Decal ID" id="AssetConverterArea"></textarea></div>

    <button class="convertButton" onclick="convert()"><span class="convertText">Convert</span></button>

    <p id="assetIdReturn">Convert your ID, and get a return!</p>

    <p class="sourceCode">This entire project's source code is free for you to check out on <a style="color: rgb(73,0,250); text-decoration: none;" href="https://github.com/hartleyfr/RobloxAssetReturner/tree/main">my github</a></p>
</body>
</html>

I tried using the CORS-Everywhere functions but to no avail. I attempted to use fixes found here on StackOverflow with it not working.

I expected it to work as follows

get the api return and table, find the asset id in the table, if the code can't find the assetId it says that the ID is invalid and asks for it to do it again. if it does find it, it shows it to the user.

It could be that `script.js` has syntax errors. Please check the file — evolutionxbox, Jan 06 '23 at 01:43
I suspect the problem is that the JSON being returned by the API is invalid. — Barmar, Jan 06 '23 at 01:48
I don't believe it is as I've just opened the URL's im trying to access for example `https://api.roblox.com/marketplace/productinfo?assetId=6916773461`. — hartley, Jan 06 '23 at 01:49
You will need to do some investigation. Please put your code in a syntax checker? — evolutionxbox, Jan 06 '23 at 01:51
`{'mode': 'no-cors'}` guarantees you will get absolutely NO response in your code, also `webRequest` will be a **Promise** so, will NOT have an attribute called `AssetId` — Jaromanda X, Jan 06 '23 at 01:52
Ahh okay. Do you know how to get a response as I am unable to use CORS, and I have been unsuccessful with learning how to use CORS-Everywhere. I found it's documentation confusing and I was unable to figure out how to use it. — hartley, Jan 06 '23 at 01:57
use your *server* to make the request as a proxy for your page — Jaromanda X, Jan 06 '23 at 02:54

score 0 · Accepted Answer · answered Jan 06 '23 at 01:58

You have a bunch of problems here in your request in terms of promise resolving, but put simply this concept is not possible because you cannot run this script without disabling CORS at a browser level, which is not something you can do from a web page for security reasons.

You are passing the request mode no-cors but this means that the response is not accessible by your JS code. https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

This fetch is never going to work because the API will not permit your cross-domain server to make the request.

score 0 · Answer 2 · answered Jan 06 '23 at 02:23

In order to do this, you would need to make the ROBLOX API request from a server (e.g. a Node.js server) and have your HTML page interact with your server (the simplest way would be to create a CORS proxy as indicated by this answer https://stackoverflow.com/a/43268098/19461620)

Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:8:42

2 Answers2