For loop is not being executed yet the condition is true

Question

Am trying to fill a file panel with all the files names in the filesList which is just an array.

When i run my app, the filesList content is loaded and at the console it shows that the list contains file objects but no elements get append to the listGroup in the DOM. I have tried to log the ==entries== but nothing gets logged. This is confusing because in the console, the filesList array contains the file Objects and filesList.length > 0 when i log it to the console.

import { FILE_PANEL } from "../../app.js";

export function fillFilePanel(filesList)
 {
  console.log(filesList);
  for (let i = 0; i < filesList.length; i++) {
    let entries = filesList[i]
    if (entries.isDirectory == true) {
      FILE_PANEL.append(`<button id="F${entries.name}" type="button" class="list-group-item list-group-item-action" key="folder" data-toggle="#F${entries.name}Group">${entries.name}</button>
        <ul class="list-group" id="F${entries.name}Group">
        </ul>`);
      let parentDir = entries.name + '/';
      // showSubFolder(parentDir)
    }
    else {
      FILE_PANEL.append(`<button type="button" class="list-group-item list-group-item-action">${entries.name}</button>`);
    }
  }
}

Code in ==MainFs.js==

import { fillFilePanel } from "./ui/sideBar.js"
{
//...some code that does other things
let filesList = [];
  listDir().then(val => (val.forEach((f) => { filesList.push(f);
  })));
  
  fillFilePanel(filesList)

}


/**
 * Read the local storage and fill the sidebar with files in it
 **/

export function listDir(url = '') {
  return new Promise(function(res, reject) {
    let path = cordova.file.externalRootDirectory + url
    console.log();
    window.resolveLocalFileSystemURL(path,
      function(fs) {
        const reader = fs.createReader();
        reader.readEntries(function(entries) {
          res(entries)
        }, (rej) => { return rej });
      }, (rej) => { return rej });
  });
}

Sample output when i console.log(filesList)

[{"isFile":false,"isDirectory":true,"name":".face","fullPath":"/.face/","filesystem":"<FileSystem: sdcard>","nativeURL":"file:///storage/emulated/0/.face/"},{"isFile":false,"isDirectory":true,"name":".audio_param","fullPath":"/.audio_param/","filesystem":"<FileSystem: sdcard>","nativeURL":"file:///storage/emulated/0/.audio_param/"},{"isFile":false,"isDirectory":true,"name":"Music","fullPath":"/Music/","filesystem":"<FileSystem: sdcard>","nativeURL":"file:///storage/emulated/0/Music/"},{"isFile":false,"isDirec ...}]

The app uses cordova file plugin to read files.

So what does `console.log(filesList.length);` say? See [Is Chrome’s JavaScript console lazy about evaluating objects?](/q/4057440/4642212). — Sebastian Simon, Dec 28 '22 at 19:16
what kind of data does filesList contain ? Could you give us a small example so that we can run your code and reproduce the issue ? Also you might want to add traces in your code such as console.log("entered loop") just after the beginning of your for loop and console.log("it is a directory") just after the condition so that you better understand what's not working as expected. — Emilien, Dec 28 '22 at 19:37
Yes it would but right now i'm just trying to get to the bottom of this particular bug, not trying to teach someone how to use a debugger — Emilien, Dec 28 '22 at 19:40
Isn't it that by default ESM exports are not live? Meaning: The strings get appended to the FILE_PANEL array but the changes are never visible to app.js? In this case app.js could have an export addFileToPanel(panel : string, directory : boolean). Then it is not necessary to export the actual Array. Ok NVM, only the default export is not live. Other exports are. See https://stackoverflow.com/a/58441210/13163094 — Stefan Pfaffel, Dec 28 '22 at 20:52

For loop is not being executed yet the condition is true

0 Answers0