put xml data into table (DOM parser)

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
php-forum Active User
php-forum Active User
Posts: 41
Joined: Thu Mar 26, 2020 2:33 pm

Wed Jul 15, 2020 2:47 am


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:


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: Select all

    <div class="container">
        <h2>myTV API</h2>

        <table id="tv">
                    <th>TV Channel</th>
                    <th>Channel Nr.</th>
                    <th id="currentDate"></th>
                    <th>TV program</th>
                    <th>Description Text</th>

                   // body with xml data must be created here !!!!!      

        <ul id="channelPrg">


    //TV API: http://www.xmltv.co.uk/feed/7365

    (function(d) {

        let output = d.getElementById('output');  


        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";
            .then(response => response.text())
            .then(data => {

             //console.log(data); //string
             let parser = new DOMParser();
             let xml = parser.parseFromString(data,"application/xml");
             //output.textContent = data;



        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;

                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; 


        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}`;


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




php-forum Active User
php-forum Active User
Posts: 41
Joined: Thu Mar 26, 2020 2:33 pm

Fri Jul 17, 2020 1:15 am

Ok, I put everything in an multidimensional array so that I'm more flexible.

I wonder why something like this does not work??

Code: Select all

 let tableFields = [];

first loop:

 second loop:
New php-forum User
New php-forum User
Posts: 4
Joined: Tue Mar 30, 2021 9:02 pm

Tue Mar 30, 2021 9:27 pm

I used this code before!
Link to Google
Post Reply