promises: fetched data weirdnesses

Question

I have a very hard time understanding the following problem :

let pets;

fetch("https://learnwebcode.github.io/json-example/animals-1.json")
.then(rawData => rawData.json())
.then(jsonData => pets = jsonData);

const animalsNames = pets.map(x => x.name);

console.log(animalsNames);

or

const pets = []

fetch("https://learnwebcode.github.io/json-example/animals-1.json")
.then(rawData => rawData.json())
.then(jsonData => pets.push(...jsonData))

const animalsNames = pets.map(x => x.name);

console.log(animalsNames);

both of them are going to return undifined or give me an empty array however I try... The weird thing is that if I simply typed this in the console afterward :

pets.map(x => x.name);

It would give me the array of the animals names. It makes me mad... I appologize in advance for I have been researching the problem and found answers on the subject, but I can't seem to apply them to my problem. There is something I am missing here. credits to LearnWebCode for his json file ^_^

Thanks folks

promises, and fetch, are Asynchronous - you are trying to access pets synchronously ... do the last two lines inside the last .then — Jaromanda X, Feb 03 '18 at 09:04
It works when *you* type it into the console, cause *you* are *asynchronous* ... — Jonas Wilms, Feb 03 '18 at 09:27
And dont try to trick out asynchronity with scoping. It wont work. Remove that global `pets` variable. You can only access it in the `then` callback. The scope will guide you where you can use it and where not. — Jonas Wilms, Feb 03 '18 at 09:29

score 1 · Accepted Answer · answered Feb 03 '18 at 09:12

This happens because a fetch call is asynchronous. Fetching a website takes time, but instead of the whole Javascript-file having to wait for this to finish (as in Python for example) it keeps on executing the rest of the program in the mean time.

So how do you process the returned value, once the fetch is done?

Enter Promises. You should really read this article to get an understanding of asynchronous programming in Javascript. Basically all you need to do is process your data after it has been fetch like so:

fetch("https://learnwebcode.github.io/json-example/animals-1.json")
.then(rawData => rawData.json())
.then(jsonData => {
    const animalNames = pets.map(x => x.name);
    console.log(animalsNames);
})

Much thanks I’ll read it ^_^ so glide I’m unstuck !!! – ToM Feb 03 '18 at 09:28 — ToM, Feb 03 '18 at 09:28

promises: fetched data weirdnesses

1 Answers1