Javascript array has data but length is zero

Question

EDIT: this appears to be a sync issue due to me not understanding promises correctly. I assumed that the ".then" waited for the promise to resolve. This is apparently not the case.

I am encountering a strange error that I've never seen before.

I have this code which produces the following output in the Chrome console.

Clearly it is an array and it has data and a length, but when I print the length property it is zero. (I also can't iterate over it with map)

I'm really confused, any help would be much appreciated.

const readFile = (file) => (
  new Promise((resolve) => {
    const fr = new FileReader();
    fr.onload = () => {
      resolve(fr.result);
    };
    fr.readAsText(file);
  })
);

const readFiles = (files) => {
  const readFiles = [];
  files.forEach((file) => (readFile(file)).then((data) => readFiles.push({name: file.name, data })));
  return readFiles;
};

const scenes = readFiles(...grabbed from file picker dialog...)
console.log('scenes: ', ui.value.scenes);
console.log('length: ', ui.value.scenes.length);

it may be that ui.value.scenes is getting updated after the log statements — brk, Apr 15 '18 at 03:58
This is not enough to identify the problem. Please [edit] the question and include a [mcve]. — Nisarg Shah, Apr 15 '18 at 03:58
No, it is being populated synchronously. I can print it multiple times with the result being correct in the console, but length is always zero when I print it. — Garrett Fleischer, Apr 15 '18 at 03:59
Try opening the console **before** running the code to avoid console-related sync problems. — CertainPerformance, Apr 15 '18 at 04:07
@Xufox it says "value was evaluated just now" which leads me to believe this is a sync issue and the value is being updated asynchronously. thanks for pointing that out. — Garrett Fleischer, Apr 15 '18 at 04:12
Dear users answering this question: when a question has been clearly asked/answered 1e6 times, don't answer it again: just mark it as a duplicate, as @Xufox did. — Gerardo Furtado, Apr 15 '18 at 04:27

Moti Korets · Accepted Answer · 2018-04-15T04:25:19.577

What you return from read file is a promise so you should read the resolved value inside then method like this

 readFile().then( (scenes) => {
     console.table(scenes)
 }

The reason you could see values in console is because when using console.log in Chrome and Firefox it is a live version of the object that might be changed from later code (from promise resolve).
If you want to print state of object in time you can run console.log(JSON.stringify(obj)) Here is a snippet from MDN

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you click it open.

Javascript array has data but length is zero

1 Answers1