Impossible de générer l'arborescence à l'aide d'une fonction JS

Question

Pourquoi la fonction buildTree ne parcourt pas l'intégralité du fichier XML?

est Ci-dessous le code xml et 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>

Comme on peut le voir dans l'extrait de code, ce noeud ne soit pas affiché.

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

Answer 1

for (i = 0 ...
Si vous ne déclarez pas i avec « var » ou « laisser », il assume la portée globale:
quand il finit itérer sur les étiquettes, hi=2, alors quand il remonte jusqu'à itérer sur la deuxième étiquette friend, i < data.children.length est faux et il s'arrête là.

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>