A
Anonymous
Guest
Hello.
I want to display the current Britsh TV in a table: here is the feed: http://www.xmltv.co.uk/feed/7365
I start with the channel and the programm. I've already made a list by looping through the nodes. It looks like that:
<li>channel1</li>
<li>programm<li>
<li>programm<li>
<li>channel2</li>
<li>programm<li>
<li>programm<li>
<li>programm<li>
and so on...
I create a node and use appendChild (see code below )
My final aim is to put all the infromation in a table like that:
TV channel | channel no | time (today) | programm | decription
I want to start with channel and programm.
Time e.g. is more complicated so I want to do this in second step.
So the first step would be to create <tr> and <td> nodes instead of the unstructured <li> , what I have right now.
How would you guys do that?
Here is the code. Thanks a lot for assistance:
I want to display the current Britsh TV in a table: here is the feed: http://www.xmltv.co.uk/feed/7365
I start with the channel and the programm. I've already made a list by looping through the nodes. It looks like that:
<li>channel1</li>
<li>programm<li>
<li>programm<li>
<li>channel2</li>
<li>programm<li>
<li>programm<li>
<li>programm<li>
and so on...
I create a node and use appendChild (see code below )
My final aim is to put all the infromation in a table like that:
TV channel | channel no | time (today) | programm | decription
I want to start with channel and programm.
Time e.g. is more complicated so I want to do this in second step.
So the first step would be to create <tr> and <td> nodes instead of the unstructured <li> , what I have right now.
How would you guys do that?
Here is the code. Thanks a lot for assistance:
Code:
<body>
<div class="container">
<h2>myTV API</h2>
<table id="tv">
<thead>
<tr>
<th>TV Channel</th>
<th>Channel Nr.</th>
<th id="currentDate"></th>
<th>TV program</th>
<th>Description Text</th>
</tr>
</thead>
<tbody>
// body with xml data must be created here !!!!!
</tbody>
</table>
<ul id="channelPrg">
</ul>
</div>
<script>
//TV API: http://www.xmltv.co.uk/feed/7365
(function(d) {
let output = d.getElementById('output');
getCurrentDate();
d.addEventListener('DOMContentLoaded',()=> {
//fetch data as soon as the page has loaded
const proxyurl = "https://cors-anywhere.herokuapp.com/";
let url = "http://www.xmltv.co.uk/feed/7365";
fetch(proxyurl+url)
.then(response => response.text())
.then(data => {
//console.log(data); //string
let parser = new DOMParser();
let xml = parser.parseFromString(data,"application/xml");
//output.textContent = data;
console.log(xml);
channelList(xml);
//channelIdList(xml);
});
});
function channelList(xml) {
let list = d.getElementById('channelPrg');
let channelName = xml.getElementsByTagName('display-name');
let channelId = xml.getElementsByTagName('channel'); //for channel ID
let programm = xml.getElementsByTagName('programme'); //for channel ID
let title = xml.getElementsByTagName('title');
for(let i=0; i < channelName.length; i++) {
let li = d.createElement('li');
let chName = channelName[i].firstChild.nodeValue;
li.textContent = chName;
list.appendChild(li);
for(let j=0; j < title.length; j++) {
//if ( channelName[i] parent <channel> id === title[j] parent <programme> channel )
if (channelName[i].parentNode.getAttribute("id") === title[j].parentNode.getAttribute("channel") ) {
let li_li = d.createElement('li');
let ttlVal = title[j].firstChild.nodeValue;
li_li.textContent = ttlVal;
list.appendChild(li_li);
}
}
}
}
function channelIdList(xml) {
let list = d.getElementById('channelId');
let channelId = xml.getElementsByTagName('channel');
for(let i=0; i < channelId.length; i++) {
let li = d.createElement('li');
let chId = channelId[i].getAttribute('id');
li.textContent = `${chId}`;
list.appendChild(li);
}
}
function getCurrentDate() {
let currentDate = new Date();
let day = currentDate.getDate();
let month = currentDate.getMonth() + 1;
let year = currentDate.getFullYear();
d.getElementById("currentDate").innerHTML = "<b>today(" + day + "-" + month + "-" + year + ")</b>";
}
})(document);
</script>
</body>