Object-oriented – What’s an Elegant and OOP way to create a tree from arrays and render it as a nested UL

javascriptobject-oriented

I have a series of arrays which represent file system paths, so each next value is actually a directory deeper, for example:

var a1 = ["Desktop", "Pictures", "Summer 2011"];

is the equivalent of

Desktop
|-Pictures
  |-Summer 2011

I'm trying to find an elegant way to:

Flatten/merge all the different arrays I have to come up with one object/dictionary/multi-dimensional-array.
Parse the result and render a nested UL (html list) to the page which represents the hierarchy correctly.
Write what I already have in a more 'OOP way'..

I already have a working version:

<!DOCTYPE html>
<html>
    <head></head>
    <body onload="init()">
        <ul id="tree"></ul>
        <script>
            var a = [ "Desktop", "Folder1",  "InnerFolder1" ];
            var b = [ "Desktop", "Folder1",  "Inner 2" ];
            var c = [ "Documents", "Folder 2", "InnerFolder1", "even deepper" ];
            var d = [ "Something Else", "Folder1",  "Inner 2" ];

            var all = [a, b, c, d];
            var Tree = {};
            var ul = document.getElementById("tree");

            function init(){
                for ( var i = 0; i < all.length; i++ ){
                    addToTree(Tree, all[i] );
                }
                createList(Tree, ul);
            }

            //function from http://stackoverflow.com/questions/3663096/how-to-convert-array-to-tree
            function addToTree(tree, array) {
                for (var i = 0, length = array.length; i < length; i++) {
                    tree = tree[ array[i] ] = tree[ array[i] ] || {};
                }
            }

            function createList( obj, _pushTo  ){
                for ( attr in obj ){
                    var _doIHaveChildren = function ( ){
                        for(var prop in obj[attr]) {
                            if (obj[attr].hasOwnProperty(prop)) {
                                return true;
                            }
                        }
                        return false;
                    }
                    var li = document.createElement("li");
                    li.id = attr.toString();
                    li.innerHTML = attr.toString();
                    if ( Tree.hasOwnProperty(attr) ){
                        ul.appendChild(li);
                    } else {
                        _pushTo.appendChild(li);
                    }
                    if ( _doIHaveChildren() === true ){
                        var ul2 = document.createElement("ul");
                        li.appendChild(ul2);
                    }
                    createList( obj[attr], ul2 );
                }
            }
        </script>
    </body>
</html>

Thanks!

EDIT:
I'm starting from strings which represent the paths i.e. "Desktop/Pictures/Summer 2011" which are broken to arrays.

Best Answer

In a simple OO way - i would define all the vars - a, b, c, and d itself as a tree.

a_tree = new tree(a);

and same for all others. After that i would have have a merge tree command

a_tree.merge_tree(b);
a_tree.merge_tree(c);

This is just another way to do things. Typically merge_tree should be recursive process.

I think to judge which method has more significant different at all, when you scale up the tree to a large size.

Related Solutions

Creating Static HTML Files with Sortable and Filterable Tables

You can't. You need one of three things to change HTML structure semantically

JavaScript, event handlers and dom manipulation
Forms, servers and postbacks to change the page and send a new one
CSS hackery, things like remodelling the CSS based on the :active state or manipulate checkboxes :checked state.

In theory it's possible to implement this with HTML and CSS alone but that's going to a be a nightmare.

Why don't you just add a link to a google document with a sortable table in it, in your email.

Of course using JavaScript to implement a sortable table isn't hard.

table.addEventListener("click", function (ev) {
  if (ev.target.tagName === "th") {
    sortTable(ev.target);
  }
});

form.addEventListener("change", function (ev) {
  applyFilters(ev);
});

Just implement sortTable and applyFilters

Javascript – Best Way to Use requestAnimationFrame and Fixed Frame Rates

Your animation should be calculated even if that calculation is entirely a function of time. And at any given time you should be able to draw() an [animated] image and know that you're getting the right frame. You want something like this, but not necessarily this:

// whatever your "attributes" looks like, the point is you've given enough
// information to the constructor to find ordered frames in the image and know
// the framerate
function SpriteAnimation(image, attributes) {

  // you probably want a SpriteFrame "class" to populate here, based on whatever
  // existing code you use to extract frames from the sprite
  this.frames = [ SpriteFrame, SpriteFrame, ... ];
                         // ... getFramesFromImageAndAttributes(image, attributes)

  // if the animation is running, this is the time it started
  this.startTime = 0;

  // whatever your framerate is ... 
  this.fps = 25;         // getFPSFromAttributes(frame_attributes)

  // whether the animation loops infinitely
  this.loop = true;      // getLoopFlagFromAttributes(frame_attributes)

  // for canceling the animationframe request, if necessary
  this.animationFrameRequestId = null;

  // draw whichever frame should be visible *right now*
  this.draw = function() {

    // unconditionally show the first frame if the animation isn't running
    if (this.startTime == 0) {
      this.frames[0].draw();
      return;
    }

    // there may be a better and more accurate way to compute this ...
    var frame_duration = 1000 / this.fps;
    var now = (new Date()).getTime();
    var elapsed_time = now - this.startTime;
    var visible_frame = Math.floor(elapsed_time / frame_duration);

    if (visible_frame_number > frames.length) {
      if (!this.loop) {
        // we're past the end of the animation and we're not looping.
        // stop the animation.
        this.startTime = 0;
        visible_frame = 0;
      }
    }

    this.frames[visible_frame % frames.length].draw();

    if (this.startTime != 0) {
      var _t = this;
      requestAnimationFrame(_t.draw);
    }

  }

  this.animate = function() {
    this.startTime = (new Date()).getTime();
    var _t = this;
    requestAnimationFrame(_t.draw);
  }

  this.stop = function() {
    this.startTime = 0;
    if (this.animationFrameRequestId) {
      cancelAnimationFrame(this.animationFrameRequestId);
    }
  }

}

var a = new SpriteAnimation("/path/to/image.jpeg", {
  fps: 25,
  frame_width: 100,
  frame_height: 100,
  image_width: 1000,
  image_height: 10000
});
a.animate();

... Or whatever.

Best Answer

Related Solutions

Creating Static HTML Files with Sortable and Filterable Tables

Javascript – Best Way to Use requestAnimationFrame and Fixed Frame Rates

Related Topic