generate html from directory and file structure in bash or javascript

I have a directory containing several other directories that contain files. I need to turn these into HTML.

How could I wrap each sub-folder in a <UL> and each filename in <li> ?

I'd like this to be in bash or javascript.
Who is Participating?
SonicVoomConnect With a Mentor Author Commented:
I used this code that I found. It didn't do exactly what I was hoping for, but it made the process go a bit faster.

function filemap($d) {
$dir = $d; // folder, e.g.: 'images/', same dir as script use a '.'
$myDirectory = opendir($dir);

while($entryName = readdir($myDirectory)) { $dirArray[] = $entryName; } // get files
closedir($myDirectory); // close directory

sort($dirArray); // sort 'em
$indexCount	= count($dirArray); // count elements in array
print "<ul class='$dir'>\n";
// loop through the array of files and print them all
for($index=0; $index < $indexCount; $index++) {
	if (substr("$dirArray[$index]", 0, 1) != ".") { // don't list hidden files
//			if (strstr("$dirArray[$index]", ".")==".pdf" || strstr("$dirArray[$index]", ".")==".gif") { // get image file types
						//print "n.push(escape('$dirArray[$index]')); ";
						if (is_dir($dirArray[$index]) ) {
						print "<li><a href='data/documents/$d/$dirArray[$index]'>$dirArray[$index]</a></li>\n ";
print "</ul>";		

Open in new window

in bash yes, in js you need to pass the folder structure to the script
SonicVoomAuthor Commented:
Bash then. or PHP...
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.


If you can get the structure into JSON format, as in the root variable below, then it should be fairly simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<script src="" type="text/javascript"></script>
<script type="text/javascript">

var root = [
    name: "DiectoryA"
    name: "DiectoryB",
    children: [
      { name: "FileA" },
        name: "DiectoryB2",
        children: [
          { name: "FileA-B2" },
          { name: "FileB-B2" }
      { name: "FileC" }
    name: "DiectoryC"

jQuery(document).ready( function() {

  $("#container").append( render( root ) );

function render( parent ) {
  var result = $( "<ul/>" );
  for( var directory in parent ) {
    $(result).append( $( "<li/>" ).text( parent[directory].name ).append( render( parent[directory].children ) ) );
  return result;


<div id="container"></div>


Open in new window

SonicVoomAuthor Commented:
I don't know how to read it all into JSON. It's more the reading part that I'm confused by than the formatting.
SonicVoomAuthor Commented:
No submitted solution solved my question, this was the result of my googling.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.