I spent a couple days looking all over the web for how to do this
well. I did some picking and choosing of methods, and I came up with
this. It works best in Safari, then FireFox, and then Chrome. I have
not tested in IE (do I have to?). It runs up to just over 20,000 lines
of XML well, over that memory is working too hard.
It is a very linear parser that descends from parent to child nodes as
it goes. I commented my code heavily so that it should be pretty
understandable. The one place that I could be a bit more efficient is
in the processing of the node attributes at each level. I would like
to parse out node attributes without specifying them (label and id are
pretty acceptable I guess), so any suggestions there would be great.
:::::The FrameWork::::::
jquery-1.4.min.js
:::::The code::::
$(function(){
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
//get root element //
$(xml).find('sites').each(function(){
//get descentdent element = "<element></element" //
$(this).find('>element').each(function(){
//set variable as this item to pass to the next
function //
var PARENT = $(this);
//get a bunch of attributes of the PARENT
element. THIS COULD BE
MORE EFFICIENT //
parentLabel = $(this).attr('label');
parentID = $(this).attr('id');
siteLAT = $(this).attr('lat');
siteLNG = $(this).attr('lng');
//set variable as string of PARENT variables//
var parentBLOCK = "<br/>" +parentLabel +" " +
parentID + "<br/>";
//set variable to post parentBLOCK//
var siteBLOCK = $("div").append(parentBLOCK);
//get descentdent element of PARENT //
$(PARENT).find('>element').each(function(){
//set variable as this item to pass to
the next function //
var THISis = $(this);
//get attributes of the THISis element.
THIS COULD BE MORE
EFFICIENT //
thisLabel = $(this).attr('label');
//set variable as string of THISis
variables//
var thisBLOCK = thisLabel +": Has this
latitude "+ siteLAT +" &
this Longitude "+siteLNG;
//set variable to post thisBLOCK//
siteBLOCK = $("div").append(thisBLOCK +
"<br/>");
//get descentdent element =
THISis//
$(THISis).find('>element').each(function(){
//get a bunch of
attributes of the child elements. THIS COULD
BE MORE EFFICIENT //
childLabel =
$(this).attr('label');
//get text from nodes
of THISis chlidren elements //
childCopy =
$(this).text();
//set variable as
string of THISis child variables//
var childBLOCK =
childLabel + ": " + childCopy + "<br/>";
//set variable to post
childBLOCK//
siteBLOCK =
$("div").append(childBLOCK);
});
});
});
});
}
});
:::::The XML::::
<?xml version="1.0" encoding="UTF-8"?>
<sites>
<element label="site" id="1" lat="66" lng="104">
<element label="Location">
<element label="city">SF</element>
<element label="state">CA</element>
<element label="region">West Coast</element>
</element>
</element>
<element label="site" id="2" lat="27" lng="305">
<element label="Location">
<element label="city">Las Vegas</element>
<element label="state">NV</element>
<element label="region">West</element>
</element>
</element>
<element label="site" id="3" lat="106" lng="35">
<element label="Location">
<element label="city">Pittsburgh</element>
<element label="state">Penn</element>
<element label="region">North East</element>
</element>
</element>
<element label="site" id="4" lat="77" lng="77">
<element label="Location">
<element label="city">Toledo</element>
<element label="state">Ohio</element>
<element label="region">North Mid</element>
</element>
</element>
</sites>
