Uncaught (in promise) ReferenceError: Cannot access 'USER_REPOS_API_URL' before initialization

Question

I get this error, then I'm trying to get data from GitHub. Can't find a solution. I am new to Javascript syntax and don't know many things.

HTML file:

<form onSubmit="getData(event)">
    <input type="text" name="username">
    <button>Get data</button>
</form>

Scripts file:

getData = async (event) => {
    event.preventDefault()
    var username = event.target.elements.username.value;
    if (username === '') {
        alert('U typed nothing')
    } else {
        const USER_API_URL = await fetch(`https://api.github.com/users/${username}`);
        const USER_REPOS_API_URL = await fetch(`https://api.github.com/users/${username}/repos`)   
        .then(async (res) => {
            resStatus = res.status
            if (resStatus === 200) {
                const userData = await USER_API_URL.json();
                const userRepos = await USER_REPOS_API_URL.json();
                dataContainer = document.querySelector('.data');
                dataContainer.innerHTML = '<div>Username: ' + userData.login + '</div>' + '<div>Name: ' + userData.name + '</div>' + '<div>Followers: ' + userData.followers + '</div>'
                if (userRepos) {
                    dataContainer.innerHTML += '<ul></ul>'
                    userRepos.forEach(function(repo) {
                        document.querySelector('ul').innerHTML += '<li>' + repo.full_name + '</li>'
                    })
                }
            }
            if (resStatus === 404) {
                alert('Wrong username')
            }
        })
    }
}

Answer 1

You can not use USER_REPOS_API_URL inside .then of a fetch which is assigned to USER_REPOS_API_URL !

The right hand of the assignment sign (=) is evaluated first.

While you are inside your .then, you should simply use await res.json() instead of USER_REPOS_API_URL.json()