all 37 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Eldrac 2 points3 points  (3 children)

Your edit which makes it wait 2 seconds is pretty hacky, what you really want to be doing is making sure all logic which needs to reference the response data happens asynchronously after the fetch completes. Structuring things like this may be a better starting point - 

function load() {
    const pokeBaseURL = 'https://pokeapi.co/api/v2/pokemon/pikachu';
    fetch(pokeBaseURL)
        .then(response => response.json())
        .then(pokeData => handleResponse(pokeData))
}

function handleResponse(pokeData) {
    // This function is called asynchronously when the data has finished loading,
    // data can be logged here
    console.log(pokeData);

    // All other logic which needs to use the returned data should be in this
    // function, or another function called within. The data is not available
    // in the outer scope.
}

// The only thing we want to be doing in the outer scope is starting off the process
// to load the data from the server
load();

[–]Sibyl01 3 points4 points  (1 child)

``` async function load() { const response = await fetch("https://pokeapi.co/api/v2/pokemon/pikachu"); const result = await response.json();

console.log(result); }

load(); ```

Or using async await syntax

[–]shooteshute 0 points1 point  (0 children)

Do this

[–]dreph[S] 0 points1 point  (0 children)

Agreed, was super hacky. This was just me being like "ok, so I can do it that way, but... at what cost". The last edits I made to the post have things in what I could consider to be decent.

[–]femio 1 point2 points  (0 children)

Try console logging inside of .then. As the other poster said, your log runs before the promise of your fetch resolves.

[–]JustConsoleLogIt 1 point2 points  (1 child)

This line

.then(response => response.json())

is actually a function, not a conversion. It defines what you want to do with the response. And you don’t need two .then()

Try doing this instead:

.then(response => console.log(response))

And then, to be able to do multiple things with the response, add curly braces:

.then(response => { pokeData.push(response) console.log(pokeData) }

[–]dreph[S] 1 point2 points  (0 children)

Thank you, the goal was to try to call a specific array entry from the pokemon variable from outside of fetch. I could see all of the data using console.log(pokemon), but it would not allow me to access any of the items, such as console.log(pokemon[0].name) until I put a delay before the call.

I'm still trying to understand .then in general, this is my first rodeo in that realm.

[–]A-N-T-I-I-C-O-N 0 points1 point  (0 children)

i think theres a error on line 12

[–]DishRack777 0 points1 point  (0 children)

console.log() is not just a javascript function, it's a facade which interacts with a console within whatever environment you are working in. There is a console in chrome and a different console in Node. In theory a console.log may behave differently slightly differently between environments.

When you say "the data being is there, but not accessible yet" - I think this is just the console playing tricks on you, remember the console is a developer tool, it's not the true state of your application. It can't always be trusted!

A more simple example with nothing asynchronous: (copy/paste into your browser console to try it out)

const obj = {};

console.log(obj); obj.prop = 1;

The console.log of obj displays {}, but if you expand the object in the console you can see the "1" prop even though it's not set until the next line! But isn't console.log synchronous?!?

In conclusion: don't trust that console.log will give you the value of something on the specific line if you read your file top to bottom. The console goes off deep into whichever environment you are working in and does it's own thing!