How can I Recursively Read Files and Folders using JavaScript - windows-8

Question

I've just started discovering Windows StoreApps (that's what Microsoft calls it) and I'm following the sample code here about using the FolderPicker.
I want to Iterate through the folder and read all the sub-folders and files.
There are two functions I've looked at which I thought are what I need but I'm not able to do it properly after trying hours.
In the link above, the line which says:
WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");
I tried to dig deeper in the folder with something like:
folder.getFoldersAsync().then(function (folderItem) {
document.getElementById('musicFolder').innerHTML += folderItem.length + " folders)<br/>";
folderItem.forEach(function (x) {
document.getElementById('musicFolder').innerHTML += "--" + x.name + "<br/>";
x.getFilesAsync().then(function (items) {
document.getElementById('musicFolder').innerHTML += items.length + " files"+"<br>";
});
});
});
UPDATE:
I have been struggling but can't get the stuff organized while iterating folders and sub-folders.
#Damir's code doesn't dig deepest folder. We need a recursive function. I could come up with the following function but as I said result is not organized
function scanFolder(folder) {
var isInc = false;
folder.getFoldersAsync().then(function (folderItem) {
if (folderItem.length > 0) {
folderItem.forEach(function (x) {
if (!isInc) {
isInc = true;
hyphen += "-";
}
document.getElementById('musicFolder').innerHTML += hyphen + x.name + "</br>";
x.getFilesAsync().then(function (items) {
items.forEach(function (item) {
allTracks.push({
name: item.name,
path: item.path
});
document.getElementById('musicFolder').innerHTML += hyphen +"-"+ item.name + "</br>";
});
}).done(function () {
scanFolder(x);
});
});
}
});
}

Answer 1

You want to read all the subfolders and the files inside them? Something like this should work:
folder.getFoldersAsync().then(function (folderItem) {
document.getElementById('musicFolder').innerHTML += "(" + folderItem.length + " folders)<br/>";
folderItem.forEach(function (x) {
x.getFilesAsync().then(function (items) {
document.getElementById('musicFolder').innerHTML += "--" + x.name + " (" + items.length + " files)<br>";
items.forEach(function(item) {
document.getElementById('musicFolder').innerHTML += "----" + item.name + "<br>";
});
});
});
});
EDIT:
There's actually no need for recursion to recursively scan a folder and its subfolders in WinRT. You can use StorageFolder.CreateFileQueryWithOptions() instead:
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.defaultQuery, ['*']);
options.folderDepth = Windows.Storage.Search.FolderDepth.deep;
folder.createFileQueryWithOptions(options).getFilesAsync().then(function (files) {
var paths = new Array();
files.forEach(function(file) {
paths.push(file.path);
});
paths.sort();
paths.forEach(function(path) {
document.getElementById('musicFolder').innerHTML += path + "<br>";
});
});
From here on you can transform the flat list of files to whatever you need instead of just printing out their path.