Looping through xml response

Question

This is my current code for reading through an XML file hosted online and currently, it displays the first list item. However, I want to loop through the entire XML response and display all the items. How can I do this?

 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);

NOTE: I start at item index 1 for my attempt at looping because index 0 is reserved for heading and is excluded from the list. This is the current output of the code:

Answer 1

Kindly look at below you were overwriting in for loop you need to append and display as below

find the working 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>