JavaScript XML data sorting 1

[viper6277]

So, I've been learning XML/JavaScript now for like... 4 days...I think I've been doing ok, I've downloaded several books on JavaScript and XML but I stuck on this issue...

Basically I'm trying to show a table of XML data, but I'd like to group the data ...but a category which is a node of the XML itself...here is my XML file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ACCESSORIES xmlns:html="

http://www.w3.org/1999/xhtml">

<ITEMS>
<ITEM>
<ITEMNUMBER>5709A007AA</ITEMNUMBER>
<DESCRIPTION>Cabinet-V1</DESCRIPTION>
<MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL>
<COMMENTS></COMMENTS>
<CATEGORY>1</CATEGORY>
</ITEM>
</ITEMS>
</ACCESSORIES>



and here is the java script that builds that table:

<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Firefox, Mozilla, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("1025_3.xml");

document.write("<table width='800' align='center' border='1'>");
document.write("<tr>");
document.write("<td align='center' width='100'>");
document.write("<strong>Item Number</strong>");
document.write("</td>");
document.write("<td align='center' width='500'>");
document.write("<strong>Description</strong>");
document.write("</td>");
document.write("<td align='center' width='200'>");
document.write("<strong>Models</strong>");
document.write("</td>");
document.write("</tr>");

var x=xmlDoc.getElementsByTagName("ITEM");
for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td align='center'>");
document.write(x.getElementsByTagName("ITEMNUMBER")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("MACHINEMODEL")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}

var x=xmlDoc.getElementsByTagName("ITEM");
---> ?????? <--- I believe I need to create a grouping rule here for my next group...
for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td align='center'>");
document.write(x.getElementsByTagName("ITEMNUMBER")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x.getElementsByTagName("MACHINEMODEL")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}

document.write("</table>");
}
</script>

I put a comment in the middle of the code...with regards to what I believe I need to do...but I'm at a loss on this one...

Any thoughts would be great...
If I do find an answer, I'll post the code...as I'll continue to search for a solution to this problem.

Thanks again.
Eddie

 

[ScottPrelewicz]

Hello,

I can try to help you, but I'll need more information. I'm not quite clear what you want to do.

You have a category node that you want to group all ITEM's by? Here you are just doing the same thing twice, traversing the same item.

What you want to do is walk through ITEMS. I think I would create a multidimensional array with the category number as the index of the outside array, and push into that array all ITEM nodes that have that index. I dont know if thats clear, but if not I can write up a quick example. can you supply a formatted slightly larger version of your XML data?

Scott Prelewicz
Web Developer
COMAND Solutions

 

[viper6277]

Hi Scott, sorry I didn't respond sooner, I've been at a different office. Thanks for your reply...

Well basically I'd like to group my XML data by a node value, I've already done this in basic HTML but not using XML Data just straight code...here is what I"m basically looking to do.

This is the page I've built, just using HTML

http://www.reliableoffice.com/iRC1022_ASP.php

where you see the table breaks with the category of product, is where I'd like the create the grouping, sorting is not really important. I'll post a larger XML file, so you have something to work with.

where I put my comment....

var x=xmlDoc.getElementsByTagName("ITEM");
---> ?????? <--- I believe I need to create a grouping rule here for my next group...
for (var i=0;i<x.length;i++)

I was thinking,...maybe I need to add something like :
var y=xmlDoc.getElementsByTagName("CATEGORY"=2);

 

[ScottPrelewicz]

Sorry I wasn't able to respond earlier, and I dont have time right now but I will later today to take a closer look and throw some ideas at you. I'll post again later today with a better answer.

Thanks,

Scott

Scott Prelewicz
Web Developer
COMAND Solutions

 

[ScottPrelewicz]

What you suggested there at the bottom won't work. I'd be more than happy to at least give you an untested version of what you want quickly, but if yoiu can supply a better chunk of the XML, I'll give you a thorough answer.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[ScottPrelewicz]

Hey,

Sorry for the delay, but here is an example of what you want to do. I wrote it quick, and it may be optimized, but it should get you started. I faked a larger xml data sample by just copying and pasting "ITEM" nodes.

[COLOR=#ff0000]// Fake XML String[/color]
var xmlString = '<?xml version="1.0" encoding="ISO-8859-1"?><ACCESSORIES xmlns:html="[URL unfurl="true"]http://www.w3.org/1999/xhtml"><ITEMS><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>1</CATEGORY></ITEM><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>1</CATEGORY></ITEM><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>2</CATEGORY></ITEM><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>2</CATEGORY></ITEM><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>1</CATEGORY></ITEM><ITEM><ITEMNUMBER>5709A007AA</ITEMNUMBER><DESCRIPTION>Cabinet-V1</DESCRIPTION><MACHINEMODEL>iR1025/iR1025N/iR1025iF</MACHINEMODEL><COMMENTS></COMMENTS><CATEGORY>1</CATEGORY></ITEM></ITEMS></ACCESSORIES>';[/URL]


[COLOR=#ff0000]//Begin[/color]
var xmlDoc=null;
try {
	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async="false";
	xmlDoc.loadXML(xmlString);
} catch(e) {
	try {
		parser=new DOMParser();
		xmlDoc=parser.parseFromString(xmlString,"text/xml");
	}		catch(e) {alert(e.message)}
}

[COLOR=#ff0000]
// We will create a multi-dimensional array, groupedItems
// The outer array is all categories
// The inner array is items in that category
// Ex:
/*
	Array (groupedItems)
		(
			[1] => Array   //<--- The '1' is the value from "Category"
				(
					[0] => [object Element]  <---- these are "item" nodes
					[1] => [object Element]
					[2] => [object Element]
					[3] => [object Element]
				)
			[2] => Array
				(
					[0] => [object Element]
					[1] => [object Element]
				)
		)
*/
[/color]


if (xmlDoc != null) {
	items = xmlDoc.getElementsByTagName("ITEM"); [COLOR=#ff0000]// Get All "Items"  From the xml[/color]

	var groupedItems = [];  [COLOR=#ff0000]// This will be our items by category
	// Traverse through all items[/color]
	for (var i=0; i < items.length; i++) {
		[COLOR=#ff0000]// Get the category number (value)[/color]
		var index = items[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;

		[COLOR=#ff0000]// Do we already have this index in our array?[/color]
		if (!groupedItems[index]) {
			[COLOR=#ff0000]// We dont, so we will create a new array in this index. Our array is multi-dimensional (Array of Arrays)[/color]
			groupedItems[index] = [];
		}

		[COLOR=#ff0000]// Add the item to the category value index[/color]
		groupedItems[index].push(items[i]);
	}
}  

[COLOR=#ff0000]// Just for testing, do something more usefule here[/color]
alertAllItemNumbers(groupedItems);


function alertAllItemNumbers(groupedItems) {
	[COLOR=#ff0000]// example of how to traverse the multi-dimensiona array and get values[/color]
	var output = '';
	print_r(groupedItems);
	for (var i=0; i < groupedItems.length; i++) {
		if (groupedItems[i]) {
			var category = i;
			for (var j=0; j < groupedItems[i].length; j++) {
				var itemNumber = groupedItems[i][j].getElementsByTagName("ITEMNUMBER")[0].childNodes[0].nodeValue;

				output += "Category = " + category + ", Item Number = " + itemNumber + "\n";
			}
		}
	}
	alert(output);
}

Scott Prelewicz
Web Developer
COMAND Solutions

 

[ScottPrelewicz]

Whoops. Ignore this line:

print_r(groupedItems);

print_r() is a debugging function I use to mimic the php print_r() function. You should take it out to test the above code.



Scott Prelewicz
Web Developer
COMAND Solutions