javascript - 无法使用 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”或“let”，它假定全局范围:
当它完成 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>