Search code examples
javascriptxmlsortingdomgetelementsbytagname

JavaScript XML DOM Sort getElementsByTagName order


What i'm trying is to make a decent Tv channel EPG page, for those who don't know, EPG is what tells you what's OnAir or whats coming up next or what aired yesterday, and i'm gathering that info from a online XML.

Now i already have the EPG listed the way i want it to, sorta, my problem is that the XML has info for 5 or 6 days of EPG and i want it daily, i just want to list todays EPG or have some buttons so that people can choose to view yesterdays or tomorrows EPG, but the first listed EPG be todays.

Heres what i already have, be in mind that after StartTime hours its the day thats listed, just to be able to control whats listing.

<!DOCTYPE html>
   <html>
<body>
<style>

.esconde {
display: none;
}

.tabela {

  /*border: 1px solid black;*/
  background-color: #fff;
  color: #000;
  border-spacing: 0;

}

.tabela td {

  /*border: 1px solid black;*/
  padding: 5px 5px 5px 5px;
  text-align: left;

}

.tabela td a {

text-decoration: underline;
color: #000;

}

</style>

<!-- script para XML -->

<script>
function twoDigit(number) {
  var twodigit = number >= 10 ? number : "0"+number.toString();
  return twodigit;
}

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://services.sapo.pt/EPG/GetChannelByDateInterval?channelSigla=RTP1&startDate=2014-09-01&endDate=2015-12-31",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table class='tabela'>");
var x=xmlDoc.getElementsByTagName("Program"); 

  //var today = new Date();         // Var Today = devolve o dia de hoje!
  //var day = today.getDate();      // se colocar em .nodeValue=today); devolve hora exacta em todos os blocos;
  //var month = today.getMonth() + 1;
  //var year = today.getFullYear(); 

for (i=0;i<x.length;i++)
  {
    ds = new Date(x[i].getElementsByTagName("StartTime")[0].childNodes[0].nodeValue);
    dshoras = twoDigit(ds.getHours());
    dsminutos = twoDigit(ds.getMinutes());
    dssegundos = twoDigit(ds.getSeconds()); 
    dsdata = twoDigit(ds.getDate());

    de = new Date(x[i].getElementsByTagName("EndTime")[0].childNodes[0].nodeValue);
    dehoras = twoDigit(de.getHours());
    deminutos = twoDigit(de.getMinutes());
    desegundos = twoDigit(de.getSeconds());
    dedata = twoDigit(de.getDate());



  document.write("<tr><td>");
  document.write(dshoras+':'+dsminutos+':'+dssegundos+' '+dsdata);  //dsdata just to check the day listed
  document.write("</td><td>");
  document.write(dehoras+':'+deminutos+':'+desegundos);
  document.write("</td><td>");
  document.write('<a href="#aparece">'+x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue+'</a>');
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

And Here is the result:

StartTime Day EndTime Title

02:20:00 07 02:53:00    Janela Indiscreta
02:53:00 07 03:45:00    Herman 2011
03:45:00 07 06:01:00    Televendas
06:01:00 07 06:30:00    Biosfera
06:30:00 07 07:31:00    Músicas De África
07:31:00 07 08:00:00    Correspondentes
08:00:00 07 10:00:00    Bom Dia Portugal Fim De Semana
10:00:00 07 11:04:00    Eucaristia Dominical
11:04:00 07 11:23:00    Cuidado Com A Língua!
11:23:00 07 12:10:00    Hotel 5 Estrelas - Ep. 3
12:10:00 07 13:00:00    BBC Terra
13:00:00 07 14:19:00    Jornal Da Tarde
14:19:00 07 15:14:00    Só Visto!
15:14:00 07 15:53:00    Nikita T3 - Ep. 10
15:53:00 07 17:32:00    Cães e Gatos: A Vingança de Kitty Galore
17:32:00 07 19:00:00    Primeiro Golpe
19:00:00 07 19:34:00    Telejornal
19:34:00 07 21:57:00    Portugal x Albânia - Qualificação EURO 2016 (Direto)
21:57:00 07 00:01:00    O Preço Certo Ao Vivo
00:01:00 08 00:34:00    Futebol: EURO 2016 (Resumos)
00:34:00 08 02:05:00    O Mistério Dos Exames Roubados
02:05:00 08 02:47:00    Odisseia - Ep. 4
02:47:00 08 03:32:00    Só Visto!
03:32:00 08 04:17:00    Breviário Biltre
04:17:00 08 06:03:00    Televendas
06:03:00 08 06:30:00    Consigo
06:30:00 08 10:00:00    Bom Dia Portugal
10:00:00 08 13:00:00    Verão Total (Manhã)
13:00:00 08 14:18:00    Jornal Da Tarde
14:18:00 08 14:47:00    Os Nossos Dias - Ep. 244
14:47:00 08 18:00:00    Verão Total (Tarde)
18:00:00 08 19:09:00    Portugal Em Direto
19:09:00 08 20:00:00    O Preço Certo
20:00:00 08 21:08:00    Telejornal
21:08:00 08 21:48:00    Bem-vindos A Beirais T3 - Ep. 124
21:48:00 08 22:33:00    Água De Mar - Ep. 41
22:33:00 08 23:40:00    Quem Quer Ser Milionário
23:40:00 08 01:08:00    Vá Cavar Batatas
01:08:00 09 01:55:00    Arrow T1 - Ep. 19
01:55:00 09 02:52:00    Liberdade 21 T1 - Ep. 21
02:52:00 09 04:24:00    Vila Faia - Ep. 31
04:24:00 09 06:30:00    Televendas
06:30:00 09 10:00:00    Bom Dia Portugal
10:00:00 09 13:00:00    Verão Total (Manhã)
13:00:00 09 14:17:00    Jornal Da Tarde
14:17:00 09 14:46:00    Os Nossos Dias - Ep. 245
14:46:00 09 18:00:00    Verão Total (Tarde)
18:00:00 09 19:11:00    Portugal Em Direto
19:11:00 09 20:00:00    O Preço Certo
20:00:00 09 21:07:00    Telejornal
21:07:00 09 21:49:00    Bem-vindos A Beirais T3 - Ep. 125
21:49:00 09 22:31:00    Água De Mar - Ep. 42
22:31:00 09 23:36:00    Quem Quer Ser Milionário
23:36:00 09 00:59:00    Vidas A Crédito
00:59:00 10 01:44:00    Arrow T1 - Ep. 20
01:44:00 10 02:34:00    Liberdade 21 T1 - Ep. 22
02:34:00 10 03:59:00    Vila Faia - Ep. 33
03:59:00 10 04:09:00    De Mal A Pior
04:09:00 10 06:30:00    Televendas
06:30:00 10 10:00:00    Bom Dia Portugal
10:00:00 10 13:00:00    Verão Total (Manhã)
13:00:00 10 14:15:00    Jornal Da Tarde
14:15:00 10 14:45:00    Os Nossos Dias - Ep. 246
14:45:00 10 18:00:00    Verão Total (Tarde)
18:00:00 10 19:00:00    Portugal Em Direto
19:00:00 10 20:00:00    O Preço Certo
20:00:00 10 21:15:00    Telejornal
21:15:00 10 22:00:00    Bem-vindos A Beirais T3 - Ep. 126
22:00:00 10 23:00:00    Água De Mar - Ep. 43
23:00:00 10 00:00:00    Quem Quer Ser Milionário
00:00:00 11 01:30:00    Jogos Cruéis
01:30:00 11 02:15:00    Arrow T1 - Ep. 21
02:15:00 11 03:15:00    Liberdade 21 T1 - Ep. 23
03:15:00 11 04:00:00    Vila Faia - Ep. 35
04:00:00 11 06:30:00    Televendas
06:30:00 11 10:00:00    Bom Dia Portugal
10:00:00 11 13:00:00    Verão Total (Manhã)
13:00:00 11 14:15:00    Jornal Da Tarde
14:15:00 11 14:45:00    Os Nossos Dias - Ep. 247
14:45:00 11 18:00:00    Verão Total (Tarde)
18:00:00 11 19:00:00    Portugal Em Direto
19:00:00 11 20:00:00    O Preço Certo
20:00:00 11 21:15:00    Telejornal
21:15:00 11 22:00:00    Bem-vindos A Beirais T3 - Ep. 127
22:00:00 11 22:15:00    Fatura Da Sorte
22:15:00 11 23:00:00    Água De Mar - Ep. 44
23:00:00 11 00:00:00    Quem Quer Ser Milionário
00:00:00 12 01:30:00    A Princesa
01:30:00 12 02:15:00    Arrow T1 - Ep. 22
02:15:00 12 03:15:00    Liberdade 21 T1 - Ep. 24
03:15:00 12 04:00:00    Vila Faia - Ep. 37
04:00:00 12 06:30:00    Televendas
06:30:00 12 10:00:00    Bom Dia Portugal
10:00:00 12 13:00:00    Verão Total (Manhã)
13:00:00 12 14:15:00    Jornal Da Tarde
14:15:00 12 14:45:00    Os Nossos Dias - Ep. 248
14:45:00 12 18:00:00    Verão Total (Tarde)
18:00:00 12 19:00:00    Portugal Em Direto
19:00:00 12 20:00:00    O Preço Certo
20:00:00 12 21:15:00    Telejornal
21:15:00 12 22:00:00    Bem-vindos A Beirais T3 - Ep. 128
22:00:00 12 23:00:00    Água De Mar - Ep. 45
23:00:00 12 00:00:00    Quem Quer Ser Milionário
00:00:00 13 01:45:00    Filme A Designar
01:45:00 13 02:30:00    Arrow T1 - Ep. 23
02:30:00 13 03:30:00    Liberdade 21 T1 - Ep. 25
03:30:00 13 04:15:00    Vila Faia - Ep. 39
04:15:00 13 06:30:00    Televendas
06:30:00 13 07:00:00    África Global

If you notice he lists all the days available, how can i sort just todays EPG?

Thanks for the help and atention, zkazzay


Solution

  • Look here for documentation of javascript Dates.

    Basically, what you want to do is compare the Date object created from the XML data to today's Date, and make the addition of your table row conditional on them being on the same day:

    var today = new Date().setHours(0,0,0,0); // today at midnight
    var startDay = ds.setHours(0,0,0,0);      // midnight at program starttime's day
    if (startDay === today) {
        document.write("<tr><td>");
        // etc.
    }