Problem with looping over attributes in XML->DOM

[louissan]

Hi all,


I'm coming across a problem, and really do not get where it comes
from.

The goal: to loop over attributes read from "object" nodes in an
imported XML file/flow (via XMLHTTP) and transform them into HTML/DOM
attributes.


The function ObjectList reads from the imported XML and calls the
needed functions to 'render' DOM nodes.

function objectList(object,usersrc) {
var attlist=new Array();
var objs = usersrc.getElementsByTagName(object);
for (i=0;i<objs.length;i++) {
alert(objs.length); // reads 5, but the loop stops at 0
var obj;
for (j=0;j<objs.attributes.length;j++) {
attlist[j]='"'+objs.attributes[j].nodeName+'|'+objs.attributes[j].nodeValue+'"';
}
var objType = objs.getAttribute('type');
if (objType=='anchor') obj = new anchor(attlist);
else {obj=null,alert('no type specified');}
// append child nodes
document.getElementById(objectListId).appendChild(obj);
}
}

The anchor function creates the node in the DOM

var a_att="..."; // list of valid W3C anchor attributes

function anchor(attlist) {
var att,attval;
newanchor = document.createElement('a');
for (i=0;i<attlist.length;i++) {
att = attlist.substring(1,(attlist.indexOf(sep)));
attval = attlist.substring(attlist.indexOf(sep)+1,attlist.length-1);
new Function ( 'if (a_att.indexOf(att)!=-1) {newanchor.' + att +
'="' + attval + '";}' );
}
var anchortext = new textNode('test');
newanchor.appendChild(anchortext);
return newanchor;
}

If my imported XML file looks like this:

<root>
<menu type="anchor" href="test.jsp" cssClass="top"
icon="test.gif">overview</menu>
<menu type="anchor" href="test.jsp" cssClass="top"
icon="test.gif">overview</menu>
<menu type="anchor" href="test.jsp" cssClass="top"
icon="test.gif">overview</menu>
<menu type="anchor" href="test.jsp" cssClass="top"
icon="test.gif">overview</menu>
<menu type="anchor" href="test.jsp" cssClass="top"
icon="test.gif">overview</menu>
</root>

The ObjetList loop stops at i=0. Why? Any clue?

Thanks

 

[Dietmar Meier]

function objectList(object,usersrc) {
[...]
for (i=0;i<objs.length;i++) {
[...]
if (objType=='anchor') obj = new anchor(attlist);
[...]
function anchor(attlist) {
[...]
for (i=0;i<attlist.length;i++) {
[...]

You use the same _global_ variable i in both functions.
See ECMA-262 section 12.2 for details.

ciao, dhgm

 

[Martin Honnen]

louissan wrote:

function objectList(object,usersrc) {
var attlist=new Array();
var objs = usersrc.getElementsByTagName(object);
for (i=0;i<objs.length;i++) {
alert(objs.length); // reads 5, but the loop stops at 0

You need to learn to use local variables as much as possible, in
particular loop variables should always be local to a function otherwise
if you call into another function that use the same variable you get all
sort of unwanted side effects.
Thus use
for (var i = 0; ...)

var obj;
for (j=0;j<objs.attributes.length;j++) {

and
for (var j = 0; ...)

function anchor(attlist) {
var att,attval;
newanchor = document.createElement('a');
for (i=0;i<attlist.length;i++) {

and
for (var i = 0;
and then start again, your code is more likely to do what you want now.

Note that I haven't checked all your code carefully, there might be
other problems, but once you fix the variables to be local to the
functions you can post back if there are still problems.

 

[louissan]

The local variables were indeed the problem

 

[Martin Honnen]

The local variables were indeed the problem

No, the lack of local variables were the problem.