Html / XML застревает в поисках узла, этого не должно быть

Question

Я работаю над небольшим интерфейсом xml / html, чтобы перечислить кучу кнопок, и у меня проблема с тем, что, по моему мнению, он ищет типы элементов в узлах, которых не должно быть.

В XML есть <set> групп, а внутри него будет <items> с <type>, 'кнопкой' или 'разрывом'. После проверки, является ли <type> «кнопкой», он затем загружает <name>, но, похоже, пытается загрузить <name> и для типов «прерывания»?

$(document).ready(function(){   
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","list.xml",false);

    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    
    var data_sets = xmlDoc.getElementsByTagName("set");
    
    for (var i = 0; i < data_sets.length; i++) {
        $("body").append('<div id="set'+i+'"> <h2>SetContent'+i+'</h2></div>');  
        
        for (var j = 0; j < data_sets[i].children.length; j++) {
            var type = data_sets[i].getElementsByTagName("type")[j].childNodes[0].nodeValue;
            
            if(type=="button"){
                var name = "name";
                
                name = data_sets[i].getElementsByTagName("name")[j].childNodes[0].nodeValue;
                //commenting out this name line above seems to stop the crash?

                $("#set"+i).append('<button type=button id="btn_'+i+'_'+j+'">'+name+'</button>');

            }else if(type=="break"){
                $("#set"+i).append('<br>');
            }
        }
    }
}); 

И XML:

<?xml version="1.0" encoding="UTF-8"?>
<data>
<set name="Set A">
  <item>
      <type>button</type>
      <name>btn 1 A</name>
      <color>#ff00ff</color>
  </item>
    <item>
      <type>button</type>
      <name>btn 1 B</name>
      <color>#ff00ff</color>
  </item>
  <item>
      <type>break</type>
  </item>
    <item>
      <type>button</type>
      <name>btn 1 C</name>
      <color>#ff00ff</color>
  </item>
</set>
<set name="Set B">
  <item>
      <type>button</type>
      <name>btn 2 A</name>
      <color>#ff00ff</color>
  </item>
  <item>
      <type>break</type>
  </item>
    <item>
      <type>button</type>
      <name>btn 2 B</name>
      <color>#ff00ff</color>
  </item>
    <item>
      <type>button</type>
      <name>btn 2 C</name>
      <color>#ff00ff</color>
  </item>
</set>

</data>

Answer 1

Вы ищете элемент j-го типа, когда вам нужно заблокировать элемент j-го элемента.

Это изменение на одну строку, ниже:

$(document).ready(function(){   
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","list.xml",false);

    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    
    var data_sets = xmlDoc.getElementsByTagName("set");
    
    for (var i = 0; i < data_sets.length; i++) {
        $("body").append('<div id="set'+i+'"> <h2>SetContent'+i+'</h2></div>');  
        
        for (var j = 0; j < data_sets[i].children.length; j++) {
            var type = data_sets[i].getElementsByTagName("type")[j].childNodes[0].nodeValue;
            
            if(type=="button"){
                var name = "name";
                
//I have changed how you reference the name element
                name = data_sets[i].getElementsByTagName("item")[j].getElementsByTagName("name")[0].childNodes[0].nodeValue
                
                $("#set"+i).append('<button type=button id="btn_'+i+'_'+j+'">'+name+'</button>');

            }else if(type=="break"){
                $("#set"+i).append('<br>');
            }
        }
    }
}); 
            

(и его немного странно иметь переменную с именем 'type', но это не относится к делу)