Цикл ответа xml

Question

Это мой текущий код для чтения файла XML, размещенного в Интернете, и в настоящее время отображается первый элемент списка. Тем не менее, я хочу провести l oop через весь ответ 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

Пожалуйста, посмотрите ниже, что вы перезаписывали для l oop, вам нужно добавить и отобразить, как показано ниже

найти рабочий js здесь

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>