How to recursively render a tree view of a directory using FS from node

Question

so suppose I have this directory:

Root
  includes
    header.php
    footer.php
  css
    images
      logos
        white.svg
        dark.svg
      gallery
        1.jpg
        2.jpg
        3.jpg
        4.jpg
        5.jpg
      contact-page.jpg
    style.css
  js
    jquery.js
    main.js
  index.php
  contact.php
  about-us.php

I'm parsing the directory recursively using this answer from another stack overflow post.

It returns an array with objects with all the files and folders, if it's a folder, then it has a 'children' array with all sub files or sub folders an so.

How can I iterate through this object to render that into HTML using <ul> and <li> elements. I know it must use a recursive function but I can't wrap my head around it. Also, it can use jQuery to append elements.

Thanks in advance!

EDIT: http://pastebin.com/iQ3xbKpC there is the JSON

Please just post the JSON structure that your server emits and remove all the irrelevant details on how it creates that. — Bergi, Mar 23 '17 at 19:28
Thing is, I don't have those files, it's just an example, I tried with a project of mine and it worked perfectly, wait me a minute while I create same fake example and post the json. wait for the edit — nick, Mar 23 '17 at 19:30

score 4 · Accepted Answer · answered Mar 23 '17 at 19:47

You could use this recursive function:

function listHtml(children) {
    return  '<ul>' + children.map(node => 
                '<li>' + node.name +
                    (node.type === 'file' ? '' : listHtml(node.children)) +
                '</li>').join('\n') +
            '</ul>';
}

// Sample data
var data = [ 
    { name: 'Root', type: 'folder', children: [
      { name: 'includes', type: 'folder', children: [
        { name: 'header.php', type: 'file' },
        { name: 'footer.php', type: 'file' },
      ]},
      { name: 'css', type: 'folder', children: [
        { name: 'images', type: 'folder', children: [
          { name: 'logos', type: 'folder', children: [
            { name: 'white.svg', type: 'file' },
            { name: 'dark.svg', type: 'file' },
          ]},
          { name: 'gallery', type: 'folder', children: [
            { name: '1.jpg', type: 'file' },
            { name: '2.jpg', type: 'file' },
            { name: '3.jpg', type: 'file' },
            { name: '4.jpg', type: 'file' },
            { name: '5.jpg', type: 'file' },
          ]},
          { name: 'contact-page.jpg', type: 'file' },
        ]},
        { name: 'style.css', type: 'file' },
      ]},
      { name: 'js', type: 'folder', children: [
        { name: 'jquery.js', type: 'file' },
        { name: 'main.js', type: 'file' },
      ]},
      { name: 'index.php', type: 'file' },
      { name: 'contact.php', type: 'file' },
      { name: 'about-us.php', type: 'file' },
    ]}
];

// transform to HTML
var html = listHtml(data);
// Inject into document
document.body.insertAdjacentHTML( 'beforeend', html );

works flawlessly, thanks, I have one more question though, what if I want to wrap folders into a div for example, how can I do that? — nick, Mar 24 '17 at 02:09
That depends whether you want the `div` to contain just the folder name, or the whole substructure. Either wrap only `node.name` in `div` or everything between `li`: `
Nevermind I figured it out, also, basing me on your code, I could implement my own solution, so thanks!! — nick, Mar 24 '17 at 06:46
Nice little recursive function using the `.map` and `node` there. — Mark Schultheiss, Mar 31 '17 at 18:49

How to recursively render a tree view of a directory using FS from node

1 Answers1