Parsing Data To Create A Navigation Pane

I have this XML response: http://jsfiddle.net/ZeeHv/ I'm trying to create something like this using the information from the dump:

• Academic

Solution 1:

A simple solution would be to build a map of indexes based on the depth of the links, the depth is determined by the number of / in the url.

varmap = {}; //init the mapfor (var i = 0, l = webs.length; i < l; i++) {
  //we create a index for our links based on the depth of them by `/`var m = webs[i].attributes['Url'].value.substring(23, webs[i].attributes['Url'].value.length).split('/').length; 

  map[m] = map[m] || []; //make sure we leave alone the old values if there is none init with new arraymap[m].push(webs[i].attributes['Url'].value); //push new value to node
}
console.log(map);

console.log(map); will output an object similar to this:

{
    "1": ["https://hosted.demo.ca", "https://hosted.demo.ca/academic", "https://hosted.demo.ca/archive", ...],
    "2": ["https://hosted.demo.ca/academic/bm", "https://hosted.demo.ca/academic/cmtte", ...],
}

From this you can create your list of elements.