Kevin Powell - Community•3mo ago

Why is my variable not Global ?

I have successfully fetched data from an API, and can console.log it in one function but not another. How do I make it globally accessible please?

    let movieList
    let currentMovie = 0

    getMovies()
    displayCurrentMovie()

    async function getMovies() {
        movieList = await fetchMovieData()
        console.log(movieList) // THIS WORKS
    }

    function displayCurrentMovie() {
        console.log(movieList) // THIS DOES NOT WORK
    }

    // Get the 20 most popular movies from TMDB
    async function fetchMovieData() {
        const API_URL = 'https://api.themoviedb.org/3/movie/popular'
        const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'

        const response = await fetch(
            `${API_URL}?api_key=${API_KEY}&language=en-GB`
        )
        const results = await response.json()
            .then((data) => {
                movieList = data.results
            })
        return movieList
    }

    let movieList
    let currentMovie = 0

    getMovies()
    displayCurrentMovie()

    async function getMovies() {
        movieList = await fetchMovieData()
        console.log(movieList) // THIS WORKS
    }

    function displayCurrentMovie() {
        console.log(movieList) // THIS DOES NOT WORK
    }

    // Get the 20 most popular movies from TMDB
    async function fetchMovieData() {
        const API_URL = 'https://api.themoviedb.org/3/movie/popular'
        const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'

        const response = await fetch(
            `${API_URL}?api_key=${API_KEY}&language=en-GB`
        )
        const results = await response.json()
            .then((data) => {
                movieList = data.results
            })
        return movieList
    }

10 Replies

Jochem•3mo ago

It is global, it's just not working like you think it does. The top level of javascript isn't going to wait for getMovies to finish running before moving on https://codepen.io/jochemm/pen/vYMWmww?editors=1011 take a look at the order of the console logs in that pen you'll see that it calls getmovies, then immediately moves on to calling displaycurrentmovie before getmovies has time to finish / set the movieList to a testing value, then much later it logs out 'after await' to be more precise, it runs the synchronous part of the function, then the async part runs whenever the async part is ready to be run async/await is just syntactic sugar, it doesn't work fundamentally differently than using .then()

Blackwolf•3mo ago

ahhhhh, thank you, i understand that. so how do i get the displayCurrentMovie() to wait also ?

Jochem•3mo ago

easiest way I see is to just call it in getMovies()

Blackwolf•3mo ago

i guess, but i will need this info later and other functions will need the data, how to i prevent them being called before the api has loaded the data

Jochem•3mo ago

generally, you'd have this in a loading function that blocks the UI until the loading is done. Something with a spinner. That way, you're in control of whether other functions are triggered or not

Blackwolf•3mo ago

i thought that was the whole point of async / await is there a simple way of loading the API data and making everything else wait ?

Jochem•3mo ago

like I said, under the hood it doesn't work any different than using promises with .then

Blackwolf•3mo ago

i'm new to APIs

Jochem•3mo ago

not really, but then you should show a loading state to the user anyway

Blackwolf•3mo ago

ok, i shall do some more research, but thanks for clearing up my misunderstanding

Gaming

Programming

Why is my variable not Global ?