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.
LVL 2
SonicVoomAsked:
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.

<?php
function filemap($d) {
$dir = $d; // folder, e.g.: 'images/', same dir as script use a '.'
$subDir;
$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>";		
}
filemap($_GET['dir']);
?>

Open in new window

0
 
dexion432Commented:
in bash yes, in js you need to pass the folder structure to the script
0
 
SonicVoomAuthor Commented:
Bash then. or PHP...
0
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.

 
ProculopsisCommented:

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" 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;
}

</script>
</head>
<body>

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

</body>
</html>

Open in new window

0
 
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.
0
 
leakim971PluritechnicianCommented:
0
 
SonicVoomAuthor Commented:
No submitted solution solved my question, this was the result of my googling.
0
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.