Uncaught (in promise) SyntaxError: Unexpected end of input. How do i fix it

Question

i always get this error when i type in the userid, password, usertype. i cant figure it out. but i see it is in line 72 and 73

i dont know how the promise work

this here is the code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fetch API Sandbox</title>
</head>

<body>
  <h1>Fetch API Sandbox</h1>
  <button id="getUsers">Get JSON</button>

  <div id="output"></div>
  <!--Hier wird das JSON reingeschrieben-->

  <form id="addPost">
    <div> <input type="text" id="userid" placeholder="userID"> </div>
    <div> <input type="text" id="password" placeholder="password"> </div>
    <div> <input type="text" id="usertype" placeholder="userType"> </div>
    <input type="submit" value="Submit">
  </form>
  <script>
    document.getElementById('getUsers').addEventListener('click', getUsers);
    document.getElementById('addPost').addEventListener('submit', addPost);
    function getUsers() {
        fetch('https://192.168.50.34:9004/v1/login',{mode: "no-cors"})
        .then(function(response) {
            if (response.ok)
            return response.json();
            else
            throw new Error("Names could not be loaded!")
        })
        .then(function(json) {
            console.log(json);
            let output = '<h2>Users</h2>';
            json.forEach(function(user) {
            output += `
                <ul>
                    <li>userID: ${user.userid}</li>
                    <li>password: ${user.password}</li>
                    <li>userType: ${user.usertype}</li>
                </ul>
                `;
            console.log(output);
            document.getElementById("output").innerHTML = output;
            });
        })
    }
    function addPost(e) {
        e.preventDefault();

        let userId = document.getElementById('userid').value;
        //console.log(id);
        let password = document.getElementById('password').value;
        let userType = document.getElementById('usertype').value;

        fetch('https://192.168.50.34:9004/v1/login', {
            method: 'POST',
            mode: 'no-cors',
            headers: {
            'Accept': 'application/json,',
            'Content-type': 'application/json'
            },
            body: {
            userId: userId,
            password: password,
            userType: userType
            }
        })
        .then((res) => res.json())
        .then((data) => console.log(data))
    }
  </script>

</body>

</html>

i have tried to hardcode the userid and the password and usertype, i can see that the error come from

.then((res) => res.json())
.then((data) => console.log(data))

but i dont exactly understand what the code is doing

the error i get from Google Chrome is

Uncaught (in promise) SyntaxError: Unexpected end of input (at index.html:72:22)
at index.html:72:22
(anonymous) @ index.html:72
Promise.then (async)
addPost @ index.html:73

this here is via postman how the server should response

{
    "Result": {
        "ResultCode": 0
    },
    "AccountInfo": {
        "UserID": 1000000000000000000,
        "UniqueID": "",
        "Uuid": "xxxx-xxxx-xxxx-xxxx",
        "Name": "xxxx",
        "LoginPW": "",
        "Privilege": 1,
        "FirstLoginFlag": 0,
        "ServerID": 11,
        "LoginAllowed": 1,
        "LoginFailCount": 0,
        "WebLogin": 1,
        "VisitLogin": 0,
        "LoginIP": "",
        "LoginTime": "2022-12-21 12:45:56",
        "LastLoginIP": "",
        "LastLoginTime": "2022-12-21 12:08:12"
    },
    "SystemInfo": {
        "Version": "1.1.17.0",
        "LicenseLevel": 40,
        "LicenseStatus": 0,
        "BrandType": 1,
        "TimezoneVersion": 0,
        "HTTPSFlag": 1,
        "SiteName": "",
        "SiteLogo": "",
        "SiteMessageWarning": "",
        "DeviceServerVersion": 10
    },
    "LoginFailInfo": {
        "RemindCount": 0
    }
}

any help and links are very appreciated.

An Unexpected End Of Input usually points to a bracket or brace not being correctly closed. I can't seem to locate that issue in your code though. — somethinghere, Dec 21 '22 at 15:12
It would be helpful to check your response - an unexpected end of input can also occur if the data the server returns isn't actually json and you try to parse it. I get this error when I get a 404 page instead of data. Your code has no serious issues though, this might just be how the server responds. Please add an example of the server response you are getting, and expecting. (this would also explain why your error is on 72 - where you do `r.json()`) — somethinghere, Dec 21 '22 at 15:16
@somethinghere OP uses `"no-cors"`, meaning that the JS isn't allowed to access the response body or headers. So it doesn't really matter what the response is. — Ivar, Dec 21 '22 at 15:18
@Ivar Thats a good point, and definitely worth trying. I can however understand that for a beginner, the link you gave seems almost unrelated. This is not about the EOI error. But it might be the solution. — somethinghere, Dec 21 '22 at 15:19

score 3 · Answer 1 · answered Dec 21 '22 at 15:17

3

Remove the no-cors mode, it prevents the JS frontend from being able to access the properties of the response:

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

In addition, JavaScript may not access any properties of the resulting Response

answered Dec 21 '22 at 15:17

Adam Pearson

304
1
7

That's a good point. Wouldn't expect an EOI error, but learn something new every day. – somethinghere Dec 21 '22 at 15:17

Uncaught (in promise) SyntaxError: Unexpected end of input. How do i fix it

1 Answers1