Create a nested UL menu based on the URL path structure of menu items

Question

I have an array of menu items, each containing Name and URL like this:

var menuItems = [  
    {  
        name : \"Store\",  
        url : \"/store\"  
          


        

Answer 1

try something like this.

function Directory(parentNode) {
    //Structure for directories.  Subdirectories container as a generic object, initially empty
    this.hasSubdirectories = false;
    this.subdirectories = {};

    //Render in steps.  Until subdirectories or a link are added, all it needs is an LI and a blank anchor
    this.nodeLi = document.createElement("li");
    parentNode.appendChild(this.nodeLi);
    this.nodeA = document.createElement("a");
    this.nodeLi.appendChild(this.nodeA);

    //if a subdirectory is added, this.nodeUl will be added at the same time.
}

Directory.prototype.setLabel = function (sLabel) {
    this.nodeA.innerHTML = sLabel;
}

Directory.prototype.setLink = function (sLink) {
    this.nodeA.href = sLink;
}

Directory.prototype.getSubdirectory = function (sPath) {
    //if there were no previous subdirectories, the directory needs a new UL node.
    if (!this.hasSubdirectories) {
        this.nodeUl = document.createElement("ul");
        this.nodeLi.appendChild(this.nodeUl);
        this.hasSubdirectories = true;
    }

    //split the path string into the base directory and the rest of the path.
    var r = /^\/?(?:((?:\w|\s|\d)+)\/)(.*)$/;
    var path = r.exec(sPath);

    //if the desired path is in a subdirectory, find or create it in the subdirectories container.

    var subDirName = path[1] || path[2];
    var subDir;
    if (this.subdirectories[subDirName] === undefined) this.subdirectories[subDirName] = new Directory(this.nodeUl);
    subDir = this.subdirectories[subDirName];

    if (path[1] && path[2]) {
        return subDir.getSubdirectory(path[2]);
    } else {
        return subDir;
    }
}

function main(whichNode, aMenuItems) {
    //whichNode is the node that is to be the parent of the directory listing.
    //aMenuItems is the array of menu items.
    var i;
    var l = aItems.length;
    var topDir = new Directory(whichNode);

    //for each menu item, add a directory and set its properties.
    var dirToAdd;
    for (i = 0; i < l; i++) {
        dirToAdd = topDir.getSubdirectory(aMenuItems[i].url);
        dirToAdd.setLabel(aMenuItems[i].name);
        dirToAdd.setLink(aMenuItems[i].url);
    }

    //and that's it.
}

how's that work?