Drilling into XML with JS

Question

1. I am using an xml file with the following basic structure:
<investor level="500">
<membership>6 month Café
Membership</membership>
<perks>
<perk>Free regular/decaf coffee, tea or café
Americano everyday for 6 months</perk>
<perk>One Free baked good every week</perk>
<perk>1 free drink of choice each month for 6
months</perk>
<perk>1 free pound of coffee during the 6
months</perk>
</perks>
</investor>
etc. (no problem with the xml, etc.)
2. Am setting the datasource with:
var dsInvests = new
Spry.Data.XMLDataSet("Investors/investorPerks.xml",
"investors/investor");
Am outputting the various levels and then when click on a
level, pass the RowNumber to a JS Function. Proper number is being
passed.
3. My JS script has 2 functions:
function handleInvestClick(id) {
var myData = dsInvests.getData()[id];
setInfo(myData);
then
function setInfo(info) {
var myInfo = "";
var infoArea = document.getElementById('investArea');
var hd = var hd = '($ ' + info['@level'] + ') ' +
info.membership;
myInfo += hd;
infoArea.innerHTML = myInfo;
The above works fine.
HOWEVER, I can't seem to find the syntax to go further into
the xml.
I want to get the number of perk nodes (children of the perks
node), loop through those, and get the perk data for each node.
But, if I do something like the followings, I just undefined:
info.perks
info.perks.length
info.perks.perk[0]
(The latter 2 must produced an error, because I get no
results).
Not sure if I'm trying to do something impossible, or just
not doing it right.
Since the "membership" node shows, I'd think I could get to
the others.
Sorry for so much code, hard to explain without it...hard to
explain with it, too!
Appreciate any help.
Keith

Answer 1

Thanks, Kin. Nice to know that it's a limitation of the
nested structure right now, not my thinking!
I had gotten something to work along the lines of what you
had. Although, with yours, I kept getting a failed to establish
context so didn't get any of the detail area.
I *like* being able to do a lot of the manipulation through
JS, especially so can not necessarily show the detail for first set
automatically and be able to change css and innerText.
However, here is what I got to do what I wanted (other than
it does show the first detail automatically.
my ds sets:
var dsInvests = new
Spry.Data.XMLDataSet("Investors/investorPerks.xml",
"investors/investor");
var dsInvestPerks = new
Spry.Data.XMLDataSet("Investors/investorPerks.xml",
"investors/investor[@level = '{dsInvests::@level}']/perks/perk")
// this is quite like yours, but I went further into the xml.
Also, used ' ' at the dsInvests==. Added that to yours, but it
didn't help.
Here are the two output areas:
<h2>Investment Levels</h2>
<div id="levelWrap" spry:region="dsInvests" align="center"
class="spryHiddenRegion">
<table id="interestLevel" cellspacing="0">
<tr class="spryHiddenRegion">
<td spry:repeat="dsInvests">
<span id="r_{ds_RowNumber}"
onclick="handleInvestClick('{ds_RowNumber}');" title="Click for
details">${@level}</span>
</td>
</tr>
</table>
<div id="levExp">Click other investment levels above
for details on that level</div>
</div>
<div id="investArea">
<div id="invHead" spry:detailRegion="dsInvests">
<div><strong><span id="detLevel">(
${@level} investment)</span>
{membership}</strong></div>
</div>
<div spry:region="dsInvestPerks"><ol><li
spry:repeat="dsInvestPerks">{perk}</li></ol></div>
</div>
finally, the extra JS for the click handler in level list:
function setCells() {
var currRow = dsInvests.getCurrentRow().ds_RowID;
var rows = dsInvests.getData().length;
for(var i = 0; i< rows; i++){
var myID = document.getElementById("r_" + i);
if(i != currRow){
myID.className = "liveLevel";
myID.title = "Click for details on this level";
} else {
myID.className = "deadLevel";
myID.title = "Level currently shown below";
Spry.Data.Region.addObserver("levelWrap", function(nType,
notifier, data) {
if (nType == "onPostUpdate")
setCells();
function handleInvestClick(id) {
//var myData = dsInvests.getData()[id];
//setInfo(myData, id);
dsInvests.setCurrentRow(id);
setCells();
This all works, although seems a bit convuluted. (Although
does show the first set's detail region at start.)
This Spry stuff is great! I'm enjoying working with it and
looking forward to further evolution. Nice alternative when
Flash/Flex seems overkill for what is needed.
I combined some Spry with ColdFusion to do a couple parts in
a site that I'm developing. It's on the Directions and Investors
pages in:
http://64.118.70.228/
In the directions page, I use CF to read my xml to get the
templates of various directions to CFInclude. Then the spry click
on the area handles setting the CSS display properties to show the
proper directions. (Would be nice if there was a way to include an
html page in a page like we include pictures. Then wouldn't need
the CF step!
Thanks for help!
Keith