无法使用JS函数生成树

Question

为什么函数buildTree不会遍历整个xml？

下面是XML和JS代码：

var response = "<scope><friend><name>Alex</name><hobbies><h>music</h><h>salsa</h></hobbies></friend><friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend></scope>"; 
 

 
function buildTree(data) { 
 
    treePart = ""; 
 
    treePart += "<ul>"; 
 
    if (data.children.length != 0) { 
 
    for (i = 0; i < data.children.length; i++) { 
 
     treePart += "<li>" + data.children[i].tagName + "<span>[-]</span>"; 
 
     treePart += buildTree(data.children[i]); 
 
     treePart += "</li>"; 
 
    } 
 
    treePart += "</ul>"; 
 
    } 
 
    else { 
 
    treePart += "<li>" + data.innerHTML + "</li>"; 
 
    } 
 
    treePart += "</ul>"; 
 
    return treePart; 
 
} 
 

 
parser = new DOMParser(); 
 
xml = parser.parseFromString(response, 'text/xml'); 
 

 
x = buildTree(xml); 
 
document.getElementById('app').innerHTML = x;

<ul> 
 
    <div id="app"></div> 
 
</ul>

如可以在代码片段中可以看出，这个节点没有得到显示。

<friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend> 

Answer 1

for (i = 0 ...
如果不申报i与“VAR”或“让”，它假定全球范围内：
当它完成遍历h标签，i=2，所以当它回来重复遍历第二个friend标记，i < data.children.length为false，并停在那里。

var response = "<scope><friend><name>Alex</name><hobbies><h>music</h><h>salsa</h></hobbies></friend><friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend></scope>"; 
 

 
function buildTree(data) { 
 
    treePart = ""; 
 
    treePart += "<ul>"; 
 
    if (data.children.length != 0) { 
 
    // Initialize i with "var" or "let" 
 
    for (var i = 0; i < data.children.length; i++) { 
 
     treePart += "<li>" + data.children[i].tagName + "<span>[-]</span>"; 
 
     treePart += buildTree(data.children[i]); 
 
     treePart += "</li>"; 
 
    } 
 
    // That's one too many </ul> 
 
    //treePart += "</ul>"; 
 
    } 
 
    else { 
 
    treePart += "<li>" + data.innerHTML + "</li>"; 
 
    } 
 
    treePart += "</ul>"; 
 
    return treePart; 
 
} 
 

 
parser = new DOMParser(); 
 
xml = parser.parseFromString(response, 'text/xml'); 
 

 
x = buildTree(xml); 
 
document.getElementById('app').innerHTML = x;

<ul> 
 
    <div id="app"></div> 
 
</ul>