I'm stuck in javascript

Question

I've been stuck in one part about couple months now because i just lost my motivation with it. It may sound like a simple problem but it's not. So i wish you guys could help me out.

I have this big array which is like a windows directory. You have one folder and inside the folder you have your files and more subfolders etc ...

So the array represents a tree of the main folder and all files and folders inside it.
This is what i mean http://filext.com/images/filetree.gif

We can't know how many files and subfolders there is and I need to loop them all through

{
"index.html": {
"type": "file",
"content": "<h1>Help me</h1>"
},
"javascript": {
"type": "folder",
"content" : {
"main.js": {
"type": "file",
"content": "alert('test')"
},
"jquery": {
"type": "folder",
"content": {
//More folders and files
}
}
}
}
}

The key is the name of the file or folder like "index.html" or "javascript".
If the key is a folder the content contains the files and subfolders inside it.

I hope you understand

Sorry for my english.

Answer 1

/*
Your data structure is technically not an "array", but an "object" (some languages call them "associative arrays", "map", "symbol table" or "dictionnary" -- https://en.m.wikipedia.org/wiki/Associative_array )...

To iterate over it, you could use recursive functions ( https://en.m.wikipedia.org/wiki/Recursion_(computer_science) ):
*/

var dict = {
"index.html": {
"type": "file",
"content": "<h1>Help me</h1>"
},
"javascript": {
"type": "folder",
"content" : {
"main.js": {
"type": "file",
"content": "alert('test')"
},
"jquery": {
"type": "folder",
"content": {
//More folders and files
}
}
}
}
};

/* iterate and print list of name/type */

function print_list(obj) {
for (var name in obj) {
document.write(name+' ('+obj[name].type+')<br>');
if (obj[name].type=='folder') print_list(obj[name].content);
}
}

print_list(dict);

/* iterate and count elements */

function count_list(obj) {
var sub_count, count = {};
count.folder = 0;
count.file = 0;
for (var name in obj) {
if (obj[name].type=='folder') {
count.folder++;
sub_count = count_list(obj[name].content);
count.folder += sub_count.folder;
count.file += sub_count.file;
}
else count.file++;
}
return count;
}

var count = count_list(dict);
document.write('<br>folders count: '+count.folder+'<br>');
document.write('files count: '+count.file+'<br>');
document.write('total count: '+(count.folder+count.file)+'<br>');

Answer 2

This is a great question that could be turned into a challenge if given the proper parameters. Specifically, create a more complete JSON model to be used as your input for all submissions and show the expected output as the objective. State if this must be in Javascript or if it doesn't matter.

The reason for this suggestion is it will provide a variety of approaches, design patterns, algorithms, etc to review. Some will be more procedural, others more OOP. Some will use lambdas / anonymous functions, others will use only traditional looping constructs.

Either way, this is an excellent scenario to code against because it's more consistent with what you'll find in real world apps than challenges that are more academic in nature.

Anyway, this is just a suggestion. If you don't post this as a challenge, I'll still work on a solution that involves creating a library of functions to return the requested data which could then be displayed or used for other purposes in the code.

Sorry for not answering your question directly. I'm just quite buried in work at the moment. 🤣

Answer 3

Take one of print_list() or count_list() and modify its body as you want:

function custom_iterate(obj) {
for (var name in obj) {
/* here for the example we print 'name' and obj[name].type, but you can use any property to do everything you want */
document.write(name+' ('+obj[name].type+')<br>');
/* for example, calling some function with the name as parameter */
someFunction(name);
/* here we just call self-function (recursivity) if the type is 'folder' */
if (obj[name].type=='folder') custom_iterate(obj[name].content);
}
}

You can check more closely the count_list() body, wich is on the same model, but doing other things ^^

Answer 4

Great. Could you edit it that in every file and folder it calls a function with its path and name.

Like this.
someFunction("index.html");
someFunction("javascript/main.js");

The function is not declared yet but will be.

I would appreciate it.