Javascript File Tree Filter From JSON Input

js-directory-tree is a pure JavaScript implementation of a folder/directory tree control that allows filtering of child nodes on the client-side.

folder tree javascript, display folder structure in html, hierarchical tree structure in html css, javascript tree view, jstree alternatives

jQuery File Browser Plugin for Creating OS Like File Browsers

How to make use of it:

1. Create an empty container to place the folder tree.

<div id="folders"></div>

2. Create a filed search to filter the folder tree.

<input placeholder="filter..." id="filterInput" oninput="solve()" type="text"/>

3. Add nodes to the folder tree following the JSON structure as follows:

const folders =
{
  type: 'dir',
  name: 'app',
  children: [
    {
      type: 'file',
      name: 'index.html'
    },
    {
      type: 'dir',
      name: 'js',
      children: [
        {
          type: 'file',
          name: 'main.js'
        },
        {
          type: 'file',
          name: 'app.js'
        },
        {
          type: 'file',
          name: 'misc.js'
        },
        {
          type: 'dir',
          name: 'vendor',
          children: [
            {
              type: 'file',
              name: 'jquery.js'
            },
            {
              type: 'file',
              name: 'underscore.js'
            }
          ]
        }
      ]
    },
    {
      type: 'dir',
      name: 'css',
      children: [
        {
          type: 'file',
          name: 'reset.css'
        },
        {
          type: 'file',
          name: 'main.css'
        }
      ]
    }
  ]
};

4. Main javascript to activate folder tree.

function displayJsonTree( data) {
  var htmlRetStr = "<ul class='folder-container'>";
  for (var key in data) {
    if (typeof(data[key])== 'object' && data[key] != null) {
      htmlRetStr += displayJsonTree( data[key] );
      htmlRetStr += '</ul></li>';
    } else if(data[key]=='dir'){
      htmlRetStr += "<li class='folder-item'>" + data["name"]+"</li><li class='folder-wrapper'>";
    }
    else if( key=='name' && data['type']!='dir' ){
      htmlRetStr += "<li class='file-item'>" + data['name']+"</li>";
    }
  }
  return( htmlRetStr );
}
function filterJson(data,string) {
  arr = [];
  for (var key in data)
    if (typeof(data[key]) == 'object' && data[key] != null) {
      if (data['name'].indexOf(string) <= -1) {
        for (var i = 0; i < data.children.length; i++) {
          arr=arr.concat(filterJson(data.children[i], string));
        }
        return arr;
      }
    }
    else {
        if (data['name'].indexOf(string) > -1) {
          arr = arr.concat(data);
          return arr;
        }
    }
}
document.getElementById("folders").innerHTML= displayJsonTree(folders);
function solve() {
  var toSearch=document.getElementById('filterInput').value;
  if(toSearch.length==0){
    document.getElementById("folders").innerHTML= displayJsonTree(folders);
  }
  else {
    var str = "Searching for: " + document.getElementById('filterInput').value ;
    document.getElementById("searchingFor").innerHTML = str;
    document.getElementById("folders").innerHTML = displayJsonTree(filterJson(folders, document.getElementById('filterInput').value));
  }
}

Filterable Folder Tree, js-directory-tree Plugin/Github