Export a global variable using asynchronous (async, await) JavaScript

Question

Ok the goal is to be equal a global scope variable to an inner information I need and then export it. But I am not able to do it (I keep getting undefined even though when I console out data, I get the info I want). I have looked at several documentations and other peoples questions NodeJS Async/Await Exporting a Variable , but it still doesn't answer my question. I know I have to use asynchronous JavaScript (async, await) but because I fairly new to JS. NOTE: GETAPRODUCTAPI is a SpringBoot API and updateClick() is called inside another method.

The global variable called dataToExport I want to export and it equals data (then(data)).

export var dataToExport;

const updateClick = () => {
    const editBtns = getQSelectorAll(".edit");
    editBtns.forEach((btn) => {
        btn.addEventListener("click", (e) => {
            const currentClicked = e.currentTarget.dataset.editid;
            const api = GETAPRODUCTAPI + currentClicked;

            fetch(api).then((response) => {
                return response.json();
            }).then((data) => {
                console.log(data); // this works fine
                // TODO
                dataToExport = data
            });
        });
    });
};
console.log(dataToExport); // undefined output

Well to begin with, you never called `updateClick()`. And after that, it just doesn't make sense to log the variable before the user clicks one of these buttons. And it'll change every time one of the buttons is clicked, it's not a good constant to export. — Bergi, Aug 13 '22 at 06:47

score 1 · Accepted Answer · answered Aug 13 '22 at 06:51

This works but you have to ensure that reading of dataToExport happens after the asynchronous code that actually sets the variable.

That is, through whatever means necessary, you would want to wait to console.log(dataToExport) until after all of the following have occurred:

updateClick is called and the event listener has been bound to the buttons
The button(s) are actually clicked (programmatically or by user interaction)
The fetch(es) are sent out
The response to the fetch(es) are received
The response json is parsed and assigned to dataToExport.

As is you're trying to read dataToExport before any of those steps have occurred and therefore the variable has not been set yet. You can periodically poll to see if the variable has been assigned (e.g. setTimeout or setInterval) or otherwise have an event that triggers a check of this variable.

Ohh I understand my mistake now. I am immediately calling dataExport that's why I am getting undefined. I have to wait to call for it to be equalled to data. — seju, Aug 13 '22 at 07:16

seju · Answer 2 · 2022-08-13T19:57:13.433

Based on @arcyqwerty explanation, I was able to figure out a logic. I created two global scopes a variable status and a function changedStatus() . Equalled status to null and then changedStatus() whose job is to check when status changes from null to something else (event that triggers a check of this variable). NOTE: I renamed dataToExport to status

let status = null;
let changedStatus = (value) => {
    status = value;
    if (status != null) {
        console.log(status);
    }
} 

const updateClick = () => {
    const editBtns = getQSelectorAll(".edit");
    editBtns.forEach((btn) => {
        btn.addEventListener("click", (e) => {
            const currentClicked = e.currentTarget.dataset.editid;
            const api = GETAPRODUCTAPI + currentClicked;

            fetch(api).then((response) => {
                return response.json();
            }).then((data) => {
                // TODO
                changedStatus(data);
            });
        });
    });
};

And as far as exporting dataToExport just like @Bergi said it doesn't make sense to export data before user clicks so instead I used localStorage. This example helped for better understanding.

Export a global variable using asynchronous (async, await) JavaScript

2 Answers2