What your are seeing here is how Chrome debugger works, when you console.log an object chrome keeps a reference to this, if you grab this data asynchronously this can sometimes be confusing.
But there is a hint that this is the issue, if you look at your output you will notice the first line has []
, this basically is saying at the point you console logged, the array was empty, but if you then click on it, Chrome will re-evaluate that reference, and at that point your array is now showing the values.
Below is a really simple snippet showing this. I basically fill two arrays called a
& b
, but I fill a
asynchronously.
If you look in the console log you will see.
a.length = 0
>[]
b.length = 3
>(3) [1, 2, 3]
But if you now click on the []
, magically you see values.
const a = [];
setTimeout(() => {
a.push(1,2,3);
}, 1);
console.log(`a.length = ${a.length}`);
console.log(a);
const b = [];
b.push(1,2,3);
console.log(`b.length = ${b.length}`);
console.log(b);
<p>Look in Chrome console,</p>
<p>Expand the first array, you will see [1,2,3], even though here it's showing []</p>