Can someone explain to me why this is not working the way I am expecting?
I am expecting the last console.log to run after my functions run, but it is returning empty length string instead of the actual date.
These are the variables I want to set after my function call. Declaring them now so the scope is set globally.
var seasonStart = ''; var seasonID = '';
This function gets my json data. I have URL declared above in my code, its returning everything as expected.
async function getCurrentSeasonapi(url) {
//store response
const response = await fetch(url);
//store data in JSON
var data = await response.json();
//I tried to set the variables here but it didn't work so I tried using a separate function
setSeasonInfo(data);
}
The function that is called above:
//set current season
function setSeasonInfo(data) {
seasonStart = data.seasons[0].regularSeasonStartDate;
seasonID = data.seasons[0].seasonId;
//this returns the correct date
console.log(seasonStart);
}
calling the function, so my variables should be set correctly after this function runs
getCurrentSeasonapi(getCurrentSeasonURL); //this is returning '' instead of the actual date set in the function console.log(seasonStart);
I’m thinking this is a scope issue but I’m not sure why. Here is an example that I was testing the scope out on. This is how I was expecting my code to run:
var test = 1;
async function changeTest() {
test =100;
}
document.getElementById("first").innerHTML = test + `<br>` + 'Run Function:' + `<br>`;
changeTest();
document.getElementById("first").innerHTML += test<html> <body> <p> testing JS execution</p> <div id = 'first'> </div> </body> </html>
Advertisement
Answer
You are not awaiting the call. The example code should have a promise in it.
var testSync = 1;
var testAsync = 1;
async function changeTest() {
testSync = 100;
await new Promise((resolve, reject) => {
setTimeout(() => {
testAsync = 100;
resolve();
}, 300);
});
}
document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
changeTest();
document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`<html> <body> <p> testing JS execution</p> <div id='first'> </div> </body> </html>
Now with it awaiting the call
var testSync = 1;
var testAsync = 1;
async function changeTest() {
testSync = 100;
await new Promise((resolve, reject) => {
setTimeout(() => {
testAsync = 100;
resolve();
}, 300);
});
}
(async function() {
document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
await changeTest();
document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`
}());<html> <body> <p> testing JS execution</p> <div id='first'> </div> </body> </html>