遍历xml响应

Question

这是我当前的代码，用于读取在线托管的XML文件，当前，它显示第一个列表项。但是，我想遍历整个XML响应并显示所有项目。我该怎么办？

var x = new XMLHttpRequest();
x.open("GET", "https://api.lncontent.works/syndicated/media", true);
x.onreadystatechange = function() {
  if (x.readyState < 4) {
    document.getElementById('header-block').innerHTML = "Loading...";
  } else if (x.readyState === 4) {
    if (x.status == 200 && x.status < 300) {
      var xml = x.responseXML;
      // MAIN TITLE
      var titles = xml.getElementsByTagName("title");
      document.getElementById('header-block').innerHTML = titles[0].childNodes[0].nodeValue;

      var item = xml.getElementsByTagName("item");
      console.log(item[0]);

      for (i = 1; i < item.length; i++) {
        var title = document.getElementById('title-block').innerHTML = item[i].getElementsByTagName("title")[0].innerHTML;
        var link = document.getElementById('link-block').innerHTML = item[i].getElementsByTagName("link")[0].innerHTML;
        var description = document.getElementById('description-block').innerHTML = item[i].getElementsByTagName("description")[0].innerHTML;
        var pubDate = document.getElementById('pubDate-block').innerHTML = item[i].getElementsByTagName("pubDate")[0].innerHTML;
        var enclosure = document.getElementById('enclosure-block').innerHTML = item[i].getElementsByTagName("enclosure")[0].innerHTML;
        var genre = document.getElementById('genre-block').innerHTML = item[i].getElementsByTagName("jwplayer:genre")[0].innerHTML;
        var artist = document.getElementById('artist-block').innerHTML = item[i].getElementsByTagName("livenation:artists")[0].getElementsByTagName("artist")[0].innerHTML;
      }
    }
  }
};
x.send(null);

注意：我尝试从项目索引1开始进行循环，因为索引0为标题保留，并从列表中排除。这是代码的当前输出：

Answer 1

请看下面 您在for循环中被覆盖，需要添加并显示如下

找到有效的js here

var x = new XMLHttpRequest();
x.open("GET", "https://api.lncontent.works/syndicated/media", true);
x.onreadystatechange = function() {
debugger;
  if (x.readyState < 4) {
    document.getElementById('header-block').innerHTML = "Loading...";
  } else if (x.readyState === 4) {
 
    if (x.status == 200 && x.status < 300) {
     debugger;
      var xml = x.responseXML;
      // MAIN TITLE
      var titles = xml.getElementsByTagName("title");
      document.getElementById('header-block').innerHTML = titles[0].childNodes[0].nodeValue;

      var item = xml.getElementsByTagName("item");
      console.log(item[0]);
var  html='';
var htmlChild='';
      for (i = 1; i < item.length; i++) {
        var title =  item[i].getElementsByTagName("title")[0].innerHTML;
        var link  = item[i].getElementsByTagName("link")[0].innerHTML;
        var description =  item[i].getElementsByTagName("description")[0].innerHTML;
        var pubDate = item[i].getElementsByTagName("pubDate")[0].innerHTML;
        var enclosure  ='';
        if(item[i].getElementsByTagName("enclosure").length>0)
        {
        enclosure=item[i].getElementsByTagName("enclosure")[0].innerHTML;
        }
        
        var genre = '';
        if(item[i].getElementsByTagName("jwplayer:genre").length>0)
        {
        genre=item[i].getElementsByTagName("jwplayer:genre")[0].innerHTML;
        }
        
        var artist=''
        if(item[i].getElementsByTagName("livenation:artists").length>0)
        {
         artist = item[i].getElementsByTagName("livenation:artists")[0].getElementsByTagName("artist")[0].innerHTML;
        }
        
        htmlChild='';
        htmlChild+="<div>Title</div><div>"+title+ "</div>";
        htmlChild+="<div>link</div><div>"+link+ "</div>";
        htmlChild+="<div>description</div><div>"+title+ "</div>";
        htmlChild+="<div>pubDate</div><div>"+pubDate+ "</div>";
        htmlChild+="<div>enclosure</div><div>"+enclosure+ "</div>";
        htmlChild+="<div>genre</div><div>"+genre+ "</div>";
        htmlChild+="<div>artist</div><div>"+artist+ "</div>";
        html+='<div style="border: 1px solid black;">'+htmlChild+'<div>';
      }
      document.getElementById('header-block').innerHTML =html;
    }
  }
};
x.send(null);

<div id="header-block">


</div>
<div id="Content">

</div>