Javascript File Tree Filter From JSON Input

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

Must Read: jQuery Dynamic Hierarchy Treeview Plugin | jsTree

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));
  }
}

Must Read: Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview