Displaying xml information in html via ajax

Question

I'm working on a web radio station, and a program through which streaming (jazler) has the ability to send xml files (containing information such as current song name, previous song ..) via ftp to a web server and these files are automatically updated when the song changes..

NowOnAir.xml code:

<Schedule System="Jazler">
    <Event status="happening" startTime="10:05:40" eventType="song">
        <Announcement Display=""/>
        <Song title="Forbidden Voices">
            <Artist name="Martin Garrix"> </Artist>
            <Jazler ID="7304"/>
            <PlayLister ID=""/>
            <Media runTime="03:05"/>
            <Expire Time="10:08:44"/>
        </Song>
    </Event>
</Schedule>

Immediately to note, I am not a programmer, and I know very little about coding! I found the following script on the Internet and tested it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
var speed = 10000; // 10 seconds

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e) {try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};

function process(xml) {
document.getElementById('contentfile').innerHTML=xml;
var title = document.getElementById('contentfile').getElementsByTagName('Song')[0].title;
var name = document.getElementById('contentfile').getElementsByTagName('Artist')[0].name;
document.getElementById('contentfile').innerHTML='NOW ON AIR: '+name+' | '+title;
}
function checkXml() {
ajax.get('http://website.com/jazler/NowOnAir.xml',process)
}
window.onload=function() {
checkXml();
tId=setInterval('checkXml()',speed)
}

</script>

</head>
<body >
<div id="contentfile">
</div>
</body>
</html>

and this shows the name of the current song, but where the name of the author should be written, it says "undefined".

NOTE: Everything is on the wordpress platform..

I do not know how, I'm not a programmer and I do not understand, can you explain a little better? — Mark
– Mark, Commented Jan 4, 2019 at 9:42

Nesku · Accepted Answer · 2019-01-04 10:10:50Z

0

title and name are attributes so I would suggest using the getAttribute method like so :

var title = document.getElementById('contentfile').getElementsByTagName('Song')[0].getAttribute("title");
var name = document.getElementById('contentfile').getElementsByTagName('Artist')[0].getAttribute("name");

I've tested this with your code and it display NOW ON AIR: Martin Garrix | Forbidden Voices.

Edit for further explaining :
I'll also like to add that the reason title was working was because you are putting your XML directly in your HTML DOM and title is an HTML DOM property.
It would be best to create a new DOM document to store the XML :

parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"text/xml");
var title = xmlDoc.getElementsByTagName('Song')[0].getAttribute("title");
var name = xmlDoc.getElementsByTagName('Artist')[0].getAttribute("name");

edited Jan 4, 2019 at 10:10

answered Jan 4, 2019 at 9:55

Nesku

5011 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Over a year ago

I have another question if it's not a problem.. I have an xml file called AirPlayHistory.xml that shows the last 3 songs that are streamed and when I use this code it only shows me one.. Can this be done to show last 3 songs?

Mark Over a year ago

AirPlayHistory CODE:

<Event status="happened"> <Song title="TO THE MOON AND BACK [RELEASED BY A!EX]"> <Artist name="SAVAGE GARDEN" ID="344264"> </Artist> <Info StartTime="10:50:44" JazlerID="11891" PlayListerID=""/> </Song> <Song title="LJULJAJ ME NEZNO"> <Artist name="JELENA TOMASEVIC" ID="344042"> </Artist> <Info StartTime="10:55:05" JazlerID="7485" PlayListerID=""/> </Song> <Song title="BIG"> <Artist name="FLAMINGOSI FEAT. NEVENA BOZOVIC" ID="344329"> </Artist> <Info StartTime="10:58:44" JazlerID="7318" PlayListerID=""/> </Song> </Event>

Nesku Over a year ago

I've edit my answer to add further explaining. If you have another problem (different than this question) you should open a new question.

Nesku Over a year ago

But for multiples songs you might want to look into for loop, this could help

Collectives™ on Stack Overflow

Displaying xml information in html via ajax

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related