put xml data into table (DOM parser)

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:

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>
 
Ok, I put everything in an multidimensional array so that I'm more flexible.

I wonder why something like this does not work??

Code: 
 let tableFields = [];

first loop:
 tableFields.push(channelName[i].firstChild.nodeValue); 

 second loop:
     tableFields[].push(title[j].firstChild.nodeValue);
 
You must log in or register to reply here.
Back
Top