Reading XML with HTML

Question

I'm having a really hard time trying to figure this out... I am working on a site for the radio station that I volunteer at, and we want to add now playing data to the site... The as play data is delivered to the site host via FTP as an XML file. Here is an example of what it looks like.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<PLAYBACKSTATE>
<TRIGGER>PLAY</TRIGGER>
<CURRENTTIME>01/29/19 01:17:05</CURRENTTIME>
<PLAYLIST>012919</PLAYLIST>
<ENV></ENV>
<PLAY INDEX="0">
<CUTID>35189</CUTID>
<TITLE>WARNED YOU</TITLE>
<LENGTH> 131.20</LENGTH>
<GROUP>2010_19</GROUP>
<ARTIST>GOOD MORNING</ARTIST>
<ALBUM>SHAWCROSS</ALBUM>
</PLAY>
<REMAINING>00:02:10</REMAINING>
</PLAYBACKSTATE>

I am needing html/js to display it as <Title> by <Artist> from <Album>, but I am super new to coding whatsoever and I don't understand what I need to do... I use Adobe Muse for most of what I do, but obviously, this is a little more advanced than muse. The xml file will be located in the root file of the site files... Thanks in advance

https://goessner.net/download/prj/jsonxml/ try this. this will parse xml from your server to json and you can do stuff on your website. — Andrejs Gubars, Jan 29 '19 at 09:01
You may want to check [this](https://stackoverflow.com/questions/12834660/how-to-retrieve-values-from-xml-file-and-display-in-html-webpage) out. Also, I am sure there are many tutorials out there explaining this. :) You would find various articles and code snippets on w3schools too. — Mathews Mathai, Jan 29 '19 at 09:09

O.O · Answer 1 · 2019-01-30T20:55:58.633

You could parse like this, using the same XML file retrieved.

Run code Snippet

var xmlFile = 'https://raw.githubusercontent.com/olayenca/externals/master/XMLArtist.xml';

function loadXML() {
  var xhttp = new XMLHttpRequest();

  xhttp.open("GET", xmlFile, true); //use your url/local filePath in place of "xmlFile"
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      parseXML(this.response);
    }
  };

}

function parseXML(xml) {
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "text/xml");
  var table = "<tr><th>Title</th><th>Artist</th><th>Album</th></tr>";
  var x = xmlDoc.getElementsByTagName("PLAYBACKSTATE");
  for (var elem of x) {
    var titles = elem.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
    var arts = elem.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
    var albums = elem.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue;

    table += "<tr><td>" + titles + "</td><td>" + arts + "</td><td>" + albums + "</td></tr>";
  }
  document.getElementById("tableID").innerHTML = table;
}
loadXML();

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

<table id="tableID"></table>

When I tried this all I got was the load button... I see other people mentioning I could try other things and other tutorials, but my issue is that it is an XML that changes with every song that plays... I tried entering in the link for the live xml, but it still wasn't working.... is there a trick to using a url vs a local file? [link](http://wdsofm.000webhostapp.com/History.xml) Thanks again! — Jake Weitzel, Jan 30 '19 at 20:36
@JakeWeitzel Yes, there are other ways, this is one, with node values inserted in a table. The button was just a trigger **`see updated snippet`**, using a `url` containing the XML or a local file should work the same, I only used the link to show you how you'd use it if it were an external service. https://raw.githubusercontent.com/olayenca/externals/master/XMLArtist.xml This is the same XML content in the question. Hope it helps. — O.O, Jan 30 '19 at 20:54

Reading XML with HTML

1 Answers1