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 ...
あなたが「VAR」または「しましょう」とiを宣言しない場合、それはグローバルな範囲を想定しています。それはhタグ、i=2を反復処理が完了したとき、それが戻ったときに
を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>