Getting "Unhandled Rejection (SyntaxError): Unexpected end of JSON input"

Question

Here is my code:

const userIds: string[] = [
    // Squall
    '226618912320520192',

    // Tofu
    '249855890381996032',

    // Alex
    '343201768668266496',

    // Jeremy
    '754681236236140666',

    // Maddo
    '711211838305599538',

    // Arden
    '375573674306306050',

    // Neo
    '718874307316678698',

    // Mytho
    '480092510505402380',

    // Yuun
    '630427600220717067'
];

const fetchData = async() => {
    let users: User[] = [];
    for (const id in userIds) {
        const response = await fetch('https://api.codetabs.com/v1/proxy/?quest=http://hamsterland.herokuapp.com/api/users?id=' + id);
        const user: User = await response.json(); 
        users.push(user);
    }
}

I get the error Unhandled Rejection (SyntaxError): Unexpected end of JSON input.

If I the API with each Id respectively, all return valid JSON. However, it does not work in the for loop.

You should check repsonse.ok before attempting to response.json() it. You are missing a try/catch around the code that can throw the error. — Drew Reese
– Drew Reese, Commented Dec 5, 2020 at 11:28

urchmaney · Accepted Answer · 2020-12-06 11:26:25Z

id is the index, not the actual value. all you need to do is instead of appending id, append userIds[id]

const userIds = [
    // Squall
    '226618912320520192',

    // Tofu
    '249855890381996032',

    // Alex
    '343201768668266496',

    // Jeremy
    '754681236236140666',

    // Maddo
    '711211838305599538',

    // Arden
    '375573674306306050',

    // Neo
    '718874307316678698',

    // Mytho
    '480092510505402380',

    // Yuun
    '630427600220717067'
];

const fetchData = async() => {
    let users = [];
    for (const id in userIds) {
        const response = await fetch('https://api.codetabs.com/v1/proxy/?quest=http://hamsterland.herokuapp.com/api/users?id=' + userIds[id]);
        const user = await response.json(); 
        users.push(user);
    }
    return users;
}

fetchData().then(ele => console.log(ele)).catch(e => console.log(e.message))

Unrelated to the current problem, await in a for loop is not a good practice. awaiting in a for loop waits for each call to finish before executing the next call. Using, Promise.all will make all the calls concurrently. Below is a snippet for the Promise.all.

const fetchData = async() => {
    let users = [];
    for (const id in userIds) {
        users.push(fetch('https://api.codetabs.com/v1/proxy/?quest=http://hamsterland.herokuapp.com/api/users?id=' + userIds[id]));
    }
    const results = await Promise.all(users);
    return Promise.all(results.map(result => result.json()));
}

mbojko · Accepted Answer · 2020-12-05 11:31:14Z

1

If you simply do

for (const id in userIds) {
    console.log(id);
}

you'll see the problem. In this loop, id are keys, not values. You probably get 404s in return.

Use a for... of loop instead of for... in.

answered Dec 5, 2020 at 11:31

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Getting "Unhandled Rejection (SyntaxError): Unexpected end of JSON input"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related