Iterate nested objects to build filetree

Question

General Info
Working on an online syntax highlighter with operational transformation for collaboration. The idea is that a single project has a filetree (pure html / css) on the left and the editor on the right. Users can create new files / directories as much as they want and obviously nest them.

The Problem
The files and directories are returned by the server as an object:

{
  "files": ["index.html","panel.html"]
  "directory1": {
    "files": ["foo.html"]
    "subdir1": {
      "files": ["somefile.txt"]
    }
    "subdir2": {
      "files": ["somefile.php","other.php"]
    }
  }
  "directory2": {
    "subdir1": {
      "files": ["you_get_the_idea.txt"]
    }
  }
}

The object is correct. Each object within contains an array with the files for that directory and a nested object representing nested directories.

The problem is that I want to list the directories alphabetically on top and the files alphabetically within, just like any filebrowser does by default. For some reason, I can't get it done correctly.

What I've tried myself

// Containing the object above
const fileData = {};

let iterations = 0;

const iterate = (fileData) => {
    Object.keys(fileData).forEach(key => {
        // It's a directory
        if (typeof fileData[key] === 'object' && fileData[key] !== null && key != 'files') {
            html += '<li><input type="checkbox"/><span>'+key+'</span><ul>';
            iterations++;
            iterate(fileData[key]);
            last = false;
        }
        // It's a file
        else
        {
            for(let i = 0; i < fileData[key].length; i++)
            {
                html += '<li><span>'+fileData[key][i]+'</span></li>';
            }

            for(let i = 0; i < iterations; i++)
            {
                html += '</ul></li>';
            }
            iterations--;
        }
    });
}

In the above example, this would result in:

- index.html
- panel.html
- directory1
-- foo.html
-- subdir1
--- somefile.txt
--- subdir2
---- somefile.php
---- other.php
---- directory2
----- subdir1
------ you_get_the_idea.txt

Running example here: https://jsfiddle.net/jbvhyzu6/ (didn't put it here because the CSS code is way too long).

While it should result in:

- directory1
-- foo.html
-- subdir1
--- somefile.txt
-- subdir2
--- somefile.php
--- other.php
-- subdir2
--- subdir1
---- you_get_the_idea.txt
- index.html
- panel.html

So my question is: How can I fix this?

icecub · Accepted Answer · 2022-06-21 05:15:15Z

1

You need to treat the nested parts before you process the rest.

const 
    fileData = { files: ["index.html", "panel.html"], directory1: { files: ["foo.html"], subdir1: { files: ["somefile.txt"] }, subdir2: { files: ["somefile.php", "other.php"] } }, directory2: { subdir1: { files: ["you_get_the_idea.txt"] } } },
    iterate = data => Object
        .entries(data)
        .reduce((r, [k, v]) => r + (
            k === 'files'
                ? v.map(s => `<li><span>${s}</span></li>`).join('')
                : `<li><input type="checkbox"/><span>${k}</span>${iterate(v)}</li>`
            ), '<ul>'
        ) + '</ul>';

document.body.innerHTML += iterate(fileData);

edited Jun 21, 2022 at 5:15

icecub

8,7936 gold badges50 silver badges80 bronze badges

answered Jun 20, 2022 at 18:44

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

icecub Over a year ago

Amazing! Thank you so much! I can work with this ^^

icecub Over a year ago

I noticed you forgot to close the <span> element here: <li><input type="checkbox"/><span>${k}${iterate(v)}</li>, so I added it.

Collectives™ on Stack Overflow

Iterate nested objects to build filetree

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related