Javascript Array Not Working within Another Function (No error reported)

Question

My array would not work as expected when items are added within a Firebase function. However, it works outside of the Firebase function.

test() is the function called to add a "sample" string into myList Array.

<script type="text/javascript">
// Firebase scripts
...

var myList = [];

// Firebase storage function. There are 6 items in res.items. Expected myList.length = 6.
res.items.forEach(function (itemRef, index) {
    itemRef.getMetadata().then(function (metadata) {
        test();
    }).catch(function (error) {
        console.log(error);
    });
});


function test(){
    myList.push("sample");
}
console.log(Array.isArray(myList)); // Returned *true* as expected.
test();
test();
console.log(myList.length); // Returned 2 instead of 8 (2 + 6 items from *Firebase* function).
console.log(myList); // Returned the Array with 8 items.
console.log(myList.length); // Still returned 2 instead of 8 (2 + 6 items from *Firebase* function).

...
</script>

The weirdest part: In browser DevTools, console.log(myList.length); returned 8 as expected. No error is reported in the console. Please view screenshots for better understanding.

Thank you very much.

Firefox Developer Tools screenshot

Chrome DevTools screenshot

This is because itemRef.getMetadata() is asynchronous and your console.log is executing before the data is obtained. — Unmitigated
– Unmitigated, Commented Jul 6, 2020 at 3:25

Unmitigated · Accepted Answer · 2020-07-06 03:48:44Z

3

This is because itemRef.getMetadata() is asynchronous and your console.log is executing before the data is obtained. You may want to use an asynchronous function and await.

(async ()=>{
    var myList = [];
    for(const itemRef of items){
      const data = await itemRef.getMetadata();
      test();
    }
    //log...
})();

Alternatively, perform logging in the .then callback:

itemRef.getMetadata().then(function (metadata) {
    test();
    console.log(myList.length);
})

edited Jul 6, 2020 at 3:48

answered Jul 6, 2020 at 3:31

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Regan Over a year ago

Thank you for your response.I have added a new line of code at the last line that prints the Array length in the console and updated all screenshots. It printed 2 although the previous line printed 8 items. Please view the screenshots again. Sorry for the inconvenience. Thank you.

Regan Over a year ago

kindly reload my question ;) it's just an addition of code at the last line to show the weird behaviour. Thanks.

Unmitigated Over a year ago

@ReganHung Did you add logging inside the .then callback?

Unmitigated Over a year ago

Try itemRef.getMetadata().then(function (metadata) {test(); console.log(myList.length)}).

Regan Over a year ago

Thank you very much for your help. You are right, asynchronous caused the issue. I did not realise it due to the weird console log behaviour as shown in the screenshots. Console somehow managed to print all 8 items faster than my last line of code.

|

Hrishi · Accepted Answer · 2020-07-06 03:37:48Z

0

You are using the promise inside forEach, try this one:

res.items.forEach(async (itemRef, index) => {
    try {
        let metadata = await itemRef.getMetadata()
        if (metadata) {
            test();
        }
        else {
            console.log('error');
        }
    }
    catch (error) {
        console.log(error)
    }
});

answered Jul 6, 2020 at 3:37

Hrishi

1,2502 gold badges14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript Array Not Working within Another Function (No error reported)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related