Solved

Need to parse sitemap.xml file using Javascript, and to display as html

Posted on 2011-09-21
8
622 Views
Last Modified: 2012-05-12
I have the following sitemap XML file:

http://docksidemarket.3dcartstores.com/sitemap.xml

I need to find a way to parse this XML file using javascript, and to display it as HTML.

Is this possible to achieve?  If so, how?  

Ideally, I'd like to do it in such a way that I don't need to add any javascript code to the HEAD section of the page (and instead have all of the javascript code be contained somewhere within the opening and closing BODY tags).

Please advise.

Thanks!
- Yvan
0
Comment
Question by:egoselfaxis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 6

Expert Comment

by:bartvd
ID: 36576330
Yes, it is possible.
This is how you parse xml via javascript: http://www.w3schools.com/xml/xml_parser.asp

Here is an example:
http://www.w3schools.com/xml/tryit.asp?filename=tryxml_parsertest
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36576454
> to display it as HTML

could you provide an example for example for the first one :
<url>
<loc>http://docksidemarket.3dcartstores.com/</loc>
<lastmod>2011-09-21</lastmod>
<changefreq>daily</changefreq>
<priority>1</priority>
</url>

Open in new window


are you ok with the follwing :
<tr><td>http://docksidemarket.3dcartstores.com</td><td>2011-09-21</td><td>daily</td></tr>

Open in new window

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 36580073

Use a style sheet to automatically transform your xml, as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27320729.html</title>
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  var xmlSource = $("#xml-source").val();
  var xslSource = $("#xml-style-sheet").val();

  var xml = parser( xmlSource );
  var xsl = parser( xslSource );
  var transform = xml.transformNode( xsl );
  $("#transform").html( transform );

});

function parser( xml )
{
  var result = new ActiveXObject( "MSXML.DOMDocument" );
  result.async = false;
  result.loadXML( xml );
  return result;
}

</script>

</head> 
<body> 

<div id="transform" class="main"></div>

<fieldset style="padding: 16px; width: 60%"><legend>XSL</legend>
<textarea id="xml-style-sheet" style="width: 100%; height: 200px; background-color: beige;">

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <ul>
      <xsl:for-each select="urlset/url">
        <li>
          <a href="{loc}"><xsl:value-of select="loc" /></a>
        </li>
      </xsl:for-each>
  </ul>
</xsl:template>
</xsl:stylesheet>

</textarea>
</fieldset>

<fieldset style="padding: 16px; width: 60%"><legend>XML</legend>
<textarea id="xml-source" style="width: 100%; height: 200px; background-color: beige;">

<?xml version="1.0" encoding="ISO-8859-1"?>
<urlset><url><loc>http://docksidemarket.3dcartstores.com/</loc><lastmod>2011-09-21</lastmod><changefreq>daily</changefreq><priority>1</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Cakes_c_1.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Cookies-Brownies_c_7.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Island-Assortments_c_8.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Salsa_c_9.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Sauces_c_10.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Hot-Sauces_c_11.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Reel-Heat_c_12.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Gift-Shop_c_13.html</loc><lastmod>2011-09-21</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Conch-Chowder_p_9.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Island-Jerk-Meatloaf_p_10.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Jicama-and-Corn-Fruit-Salad_p_11.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Tomatillo-and-Swiss-Cheese-Enchiladas_p_12.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Key-Lime-Cheesecake_p_13.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Seafood-Bisque_p_14.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://docksidemarket.3dcartstores.com/About-Us_ep_7.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url><url><loc>http://docksidemarket.3dcartstores.com/In-Your-Neighborhood_ep_40.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Serving-Suggestions_ep_42.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Storage_ep_43.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url><url><loc>http://docksidemarket.3dcartstores.com/Wholesale_ep_45.html</loc><lastmod>2011-09-21</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url></urlset>
</textarea>
</fieldset>

</body>
</html>

Open in new window

0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

Author Comment

by:egoselfaxis
ID: 36580389
leakim971 - yes -- I am ok with the table rows/cells.  All I need from the xml file are the urls, really.

Thanks,
- Yvan

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36580576
the XML is hosted on a different website than your page?
0
 

Author Comment

by:egoselfaxis
ID: 36580620
No it is not - it is on the same site.

- Yvan
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36580962
Ok put this in the body where you want to see the url :
<div id="urls"></div>
<script type="text/javascript" language="javascript">

	var xmlhttp;
	if(window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState==4 && xmlhttp.status==200) {

	    	loc = xmlhttp.responseXML.documentElement.getElementsByTagName("loc");
	    	for(i=0;i<loc.length;i++) {
		    	document.getElementById("urls").appendChild(document.createTextNode( loc[i].firstChild.nodeValue ));
		    	document.getElementById("urls").appendChild(document.createElement("br"));
	    	}
	    	document.getElementById("urls").innerHTML = table;
	    }	    
	}
	xmlhttp.open("GET", "sitemap.xml", true);
	xmlhttp.send(null);

</script>

Open in new window

0
 

Author Closing Comment

by:egoselfaxis
ID: 36582445
That worked for me - thanks!

- Yvan
0

Featured Post

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

734 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