write to variable with fetch api before rest of script executes (client side)

How does one fetch some JSON data and save it into a variable and not continue executing the rest of the script until the fetch api has fetch the JSON data?

Here is my code which will return undefined in the console.

var myVar;

fetch("myFile.json")
	.then(res => res.json())
	.then(data => {
	myVar = data;
});
	
console.log(myVar)

//rest of code executes...

View original on lemm.ee

Comments4

dandimrod

lemmy.world

If you want to continue in the same function you'll need to use async/await. In your case:

async function yourFunctionName(){
    // previous logic
    const myVar = await fetch("myFile.json")
        .then(res => res.json());
    console.log(myVar);
    //rest of code executes...
}

Realize that you have to add async to your function and await to your fetch call. Also take into account that if your function returns anything, it'll now return a Promise instead.

bucho

lemmy.one

Your variable myVar doesn't get defined until fetch receives the results, but fetch is an asychronous function, so console.log runs before myVar is defined.

If you want to wait for the results of an asynchronous function before proceeding with execution, you need to use the await keyword:

let myVar = await fetch("myFile.json").then(res => res.json());

console.log(myVar);

gornius

lemmy.world

I would recommend watching a video on how concurrency in JavaScript works. It should make everything clear for you about Promises and async await.

https://youtu.be/8aGhZQkoFbQ

Anyway, what do you want to achieve? There are many ways to go about it, at least in JS, where top level await is not a thing.

Do you want fetched data render somewhere? Or maybe that's part of your backend and you want to do something with it?

Aux

lemmy.world

Put the rest of the code into then.