generate html from directory and file structure in bash or javascript

Posted on 2011-05-06
Last Modified: 2012-05-11
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.
Question by:SonicVoom
    LVL 5

    Expert Comment

    in bash yes, in js you need to pass the folder structure to the script
    LVL 2

    Author Comment

    Bash then. or PHP...
    LVL 20

    Expert Comment


    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

    LVL 2

    Author Comment

    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.
    LVL 81

    Expert Comment

    LVL 2

    Accepted Solution

    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

    LVL 2

    Author Closing Comment

    No submitted solution solved my question, this was the result of my googling.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    Background Still having to process all these year-end "csv" files received from all these sources (including Government entities), sometimes we have the need to examine the contents due to data error, etc... As a "Unix" shop, our only readily …
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now