[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Unordered List - Nested XML using Javascript

Posted on 2009-12-21
5
Medium Priority
?
331 Views
Last Modified: 2012-05-08
Hi,

My first step into XML and it had to be difficult! Well for me anyway...

I need to add an unordered list of category links which is sub-divided by departments in a static HTML page (Blogger template).

The departments show no problem. But I can only get 5 categories to show in each department (equivalent to the number of departments)  and each category that is listed is the first child category of each department rather than the complete list for each department (hope you get my drift).

The JavaScript I'm using is below and I have attached the XML file.

Any help would be appreciated. Ive assigned 500 points as Ive been playing with this for days and I would love to sit down to my Christmas turkey with a clear conscience!




<script type="text/javascript">
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","nav1.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var i=0
var j=0
var x = 0
var y = 0

document.write("<ul>");
var x=xmlDoc.getElementsByTagName("DEPARTMENT");

for (i=0;i<x.length;i++)
  {
  document.write("<li><h3>");
  document.write(x[i].getElementsByTagName("DEPTTITLE")[0].childNodes[0].nodeValue);
  document.write("</h3></li><li class='nobk' >");
  	y=xmlDoc.getElementsByTagName("CATEGORY");
	for (j=0;j<y.length;j++)
	{
  		document.write("<ul class='category-list'><li class='category-list'><strong><a href='#'>");
  		document.write(y[j].getElementsByTagName("CATEGORYTITLE")[0].childNodes[0].nodeValue);
  		document.write("</a></strong></li></ul>");
  }
  }
	
document.write("</ul>");

</script>

Open in new window

nav1.xml
0
Comment
Question by:ComfortablyNumb
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 26096701
I think you're formatting probably needs tweaking a little, but the basic structure you should need is something like:
			document.write('<ul>');
			var nodes = xmlDoc.selectNodes("//DEPARTMENT");

			for (var i = 0; i != nodes.length; ++i)
			{
				document.write('<li><h3>');
				document.write(nodes[i].selectSingleNode("DEPTTITLE").text);
				document.write('</h3></li><li class="nobk">');

				var categories = nodes[i].selectNodes('CATEGORY/CATEGORYTITLE');
                                                document.write('<ul class="category-list">');

                                                for (var j = 0; j != categories.length; ++j)
				{
					document.write('<li class="category-list"><strong><a href="#">');
                                            		document.write(categories[j].text);
 					document.write('</a></string></li>');
				}
 				document.write('</ul></li>');
			}

Open in new window

0
 

Author Comment

by:ComfortablyNumb
ID: 26096790
Hi Carl. Thanks for that. Works great in IE but not FF - totally blank. Any ideas?
0
 

Author Comment

by:ComfortablyNumb
ID: 26096817
Also how could I improve the formatting - keen to learn!!
0
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 2000 total points
ID: 26097059
Ok, this should work across both browsers. I have also tweaked the formatting so that you don't have an erroneous <li> in there before the sub-items:
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open("GET", "test.xml", false);

			xmlHttp.send("");
			xmlDoc = xmlHttp.responseXML;

			document.write('<ul>');
			var nodes = xmlDoc.getElementsByTagName("DEPARTMENT");

			for (var i = 0; i != nodes.length; ++i)
			{
				document.write('<li><h3>');
				document.write(nodes[i].getElementsByTagName("DEPTTITLE")[0].childNodes[0].nodeValue);
				document.write('</h3>');

				var categories = nodes[i].getElementsByTagName('CATEGORYTITLE');
				document.write('<ul class="category-list">');

				for (var j = 0; j != categories.length; ++j)
				{
					document.write('<li class="category-list"><strong><a href="#">');
					document.write(categories[j].childNodes[0].nodeValue);
 					document.write('</a></string></li>');
				}
 				document.write('</ul></li>');
			}

Open in new window

0
 

Author Closing Comment

by:ComfortablyNumb
ID: 31668522
Thnaks for that Carl - All work fantastic. Have a great Xmas!!!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…

872 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