Parse XML in UL

Question

I am trying to use jQuery to parse a sitemap.xml file to look like this HTML: http://astuteo.com/slickmap/demo/

After working on it for several hours, I decided that I really needed help in the right direction.

the basic template that it has is where each indentation is a different directory level:

<ul id="primaryNav" class="col4"> <li id="home"><a href="http://sitetitle.com">Home</a></li> <li><a href="/services">Services</a> <ul> <li><a href="/services/design">Graphic Design</a></li> <li><a href="/services/development">Web Development</a></li> <li><a href="/services/marketing">Internet Marketing</a> <ul> <li><a href="/social-media">Social Media</a></li> <li><a href="/optimization">Search Optimization</a></li> <li><a href="/adwords">Google AdWords</a></li> </ul> </li> <li><a href="/services/copywriting">Copywriting</a></li> <li><a href="/services/photography">Photography</a></li> </ul> </li> </ul> 

I am using google sitemap.xml which looks like this:

http://meyers.ipalaces.org/sitemap_000.xml

 <url> <loc>http://meyers.ipalaces.org/</loc> <lastmod>2011-02-26T09:32:18Z</lastmod> <changefreq>hourly</changefreq> <priority>0.4</priority> </url> <url> <loc>http://meyers.ipalaces.org/meyers/photos/Explorer</loc> <lastmod>2011-02-26T09:31:33Z</lastmod> <changefreq>hourly</changefreq> <priority>0.2</priority> </url> 

In the method I came across, avoids setting everything as it is on the css template, but instead, I just focused on getting the correct levels:

What he does is that the URL level goes through each level, trying to create a list based on the previous level. So with an example of www.example.com/brand/model/product/ :

it gets the first element [0], www.example.com is level 1, so it checks to see if there is ul[id=1] if it then does not start create_ul and adds it to #content . Now attach li to the ul he just made. Level 1 is "special" because it must be created first, so there is a lot in the code if level==1 .

For the next element [1], it gets a brand , which is level 2. This time, it checks if li[id=www.example.com] ul[id=2] exists, if they exist, it will create one, and then attach li to ul .

This method does not work for me at all, it also gets confused if level 8 has the same identifier and something from level 4. I just need a new idea on how to approach this.

Here are my functions at the moment, but I'm sure I just need to give up most of the code:

 function create_ul(level, id, prev_id) { var ul = $('<ul/>',{ id: level }); if(level==1) { $('#content').append(ul); } else { $('ul[id='+(level-1)+'] li[id='+prev_id+']').append(ul); } } function create_li(level, id, prev_id){ if (level ==1){ if ($('ul[id='+level+']').length == 0) { create_ul(level, id, prev_id); } else if ($('ul[id='+level+'] li[id='+id+']').length > 0) { return; } var li = $('<li/>',{ id: id }); var a = $('<a/>',{ text: level + " - " + id, href: "nothing yet" }); $('ul[id='+level+']').append(li); return; } // If there is no UL for the LI, create it if ($('li[id='+prev_id+'] ul[id='+level+']').length == 0) { create_ul(level, id, prev_id); } else if ($('ul[id='+level+'] li[id='+id+']').length > 0) { return; } var li = $('<li/>',{ id: id }); var a = $('<a/>',{ text: level + " - " + id, href: "nothing yet" }); li.append(a); $('li[id='+prev_id+'] ul[id='+level+']').append(li); } $.ajax({ type: "GET", url: "/sitemap_000.xml", dataType: "xml", success: parseXml }); function parseXml(xml) { URLS = new Array(new Array(), new Array(), new Array()); $(xml).find("loc").each(function(){ var url = $(this).text(); URLS[1].push(url); url = url.replace("http://", "") var url_array = url.split("/"); URLS[0].push(url_array); var rawLastMod = $(this).parent().find('lastmod').text(); var timestamp = rawLastMod.replace(/T.+/g, ''); var lastMod = formatDate(timestamp); URLS[2].push(lastMod); }); $(URLS[0]).each(function(i, url_array){ $(url_array).each(function(index, fragment){ var level = index+1; var id = fragment; if(index!=0) { var prev_id = URLS[0][i][index-1]; } else { var prev_id = null; } if(id != "") { create_li(level, id, prev_id); } }); }); } 

---

I decided to answer a PHP solution instead of Javascript. I am using this php script: http://www.freesitemapgenerator.com/xml2html.html

Answer 1

This is my attempt.

It mainly uses an array to store all URL fragments.
For example, the URL mytest.url.com/sub1/othersub2.html treated as:

 var map = ['mytest.url.com']['sub1']['othersub2.html']; 

This is possible because javascript allows you to index arrays using strings.

Full code (just replace your parseXml function and test it on chrome or firefox with firebug):

 <script type="text/javascript"> function parseXml(xml) { //here we will store nested arrays representing the urls var map = []; $(xml).find("loc").each(function () { //some string cleaning due to bad urls provided //(ending slashes or double slashes) var url = this.textContent.replace('http://', '').replace('//', ''), endingInSlash = (url.substr(url.length - 1, 1) == '/'), cleanedUrl = url.substr(0, url.length - (endingInSlash ? 1 : 0)), splittedUrl = cleanedUrl.split('/'), //splitting by slash currentArrayLevel = map; //we start from the base url piece for (var i = 0; i < splittedUrl.length; i++) { var tempUrlPart = splittedUrl[i]; //in javascript you can index arrays by string too! if (currentArrayLevel[tempUrlPart] === undefined) { currentArrayLevel[tempUrlPart] = []; } currentArrayLevel = currentArrayLevel[tempUrlPart]; } }); var currentUrlPieces = []; //closure to the recursive function (function recursiveUrlBuilder(urlPiecesToParse) { //build up a DOM element with the current URL pieces we have available console.log('http://' + currentUrlPieces.join('/')); for (var piece in urlPiecesToParse) { currentUrlPieces.push(piece); //recursive call passing the current piece recursiveUrlBuilder(urlPiecesToParse[piece]); } //we finished this subdirectory, so we step back by one //by removing the last element of the array currentUrlPieces.pop(); })(map); } </script>