Reorder Xml Child Nodes using JavaScript without using XSLT
1/30/2007 11:40:24 AM
Man have I been busy lately. Been working on a very large project that has required working from home a lot (after working at the office or on site). The main reason being I have been doing a lot of JavaScript, XML, and now AJAX components and have become completely addicted. One of the components I am working on lately ( and having the most trouble with ) is the drag and drop screen that allows child nodes to be dragged and dropped into parent nodes. The last piece of that puzzle was to figure out how to reorder child nodes numerically within a given parent node on each onDropEvent. I only care about the onDropEvent because the Xml file is generated on the server after being pulled from SQL where the ideal ordering is computed based on configurable business logic and parameters, etc, etc...
One of the things I found while browsing the Internets is that there is some really ugly JavaScript code out there. By ugly I mean sloppy and hard to read. I figured JavaScript programmers would write neater code than what I am finding. It seems as if everyone who writes JavaScript uses Systems or Apps Hungarian notation. objObject. What's up with that? The Xml I've come across in these examples isn't the prettiest either. It doesn't follow any conventions that I've seen, been taught, or use on a daily basis. Here's a quick example:
<
root>
<productGroup productGroupId="1">
<product>
<productId>1</productId>
<productPrice>5.00</productPrice>
</product>
<product>
<productId>2</productId>
<productPrice>3.21</productPrice>
</product>
<product>
<productId>3</productId>
<productPrice>0.99</productPrice>
</product>
</productGroup>
<productGroup productGroupId="2">
<product>
<productId>4</productId>
<productPrice>3.41</productPrice>
</product>
<product>
<productId>5</productId>
<productPrice>2.97</productPrice>
</product>
<product>
<productId>6</productId>
<productPrice>3.59</productPrice>
</product>
</productGroup>
</root>
Not to tell you how to use / write Xml but for what it's worth I format mine like the example below and will reference it in the sample code later on. In my honest opinion it is much easier to read and looks more convenient and elegant.
<
root>
<productGroup productGroupId="1">
<product productId="1" productPrice="5.00" />
<product productId="2" productPrice="4.40" />
<product productId="3" productPrice="3.33" />
</productGroup>
<productGroup productGroupId="2">
<product productId="4" productPrice="2.27" />
<product productId="5" productPrice="3.10" />
<product productId="6" productPrice="4.20" />
</productGroup>
<productGroup productGroupId="3">
<product productId="7" productPrice="4.76" />
<product productId="8" productPrice="3.77" />
<product productId="9" productPrice="0.59" />
</productGroup>
</root>
So now you've implemented some drag-and-drop functionality ( for whatever reason ) and you want to order your child nodes by productId or anything else that would warrant reordering child nodes. At first I started to write this very long and complicated recursive function that took in the current node and then checked to see if the attribute in question was greater than the previous and if so it would do this and if not it would continue looping and then do that.... Well I instead went with the JavaScript Array (since it has a sort method that defaults to alpha / numerical) and populated it with the child nodes of a given Product Group. Then all you need to is sort the array and then create a node and append said node to the parent. Easy.
FYI: Xml attributes are 0-based. So in this example [0] refers to productId. If you wanted to sort by price you would use [1] as the attribute index.
function
reOrderChildren ( productGroupNode )
{
var node = null;
var path = null;
var products = productGroupNode.getElementsByTagName("product");
var items = new Array(products.length);
for ( p = 0; p < products.length; p++ )
items[p] = products[p].attributes[0].nodeValue;
// numerically sorts array (ASC);
items.sort();
for ( i = 0; i < items.length; i++ )
{
path = "//productGroup/product[@productId='" + items[i] + "']"
// xml is the name of my Xml Data Island <asp:Xml>
node = xml.selectSingleNode(path);
productGroupNode.appendChild(node);
}
}
UPDATE: See also.
AJAX,
JavaScript,
XML
