【Day30】综合练习：台铁即时时刻表！

本日作品：
https://codepen.io/linchinhsuan/pen/KKMpBZb

重点摘要：

var xhr = new XMLHttpRequest();
xhr.open('get','https://ptx.transportdata.tw/MOTC/v3/Rail/TRA/DailyTrainTimetable/Today?$format=JSON',true);
xhr.send(null);
xhr.onload = function(){.......}

使用XMLHttpRequest()语法抓到台铁当天的所有车次资料。

document.getElementById("btn").addEventListener("click",function(){
        var departure;
        var option = document.querySelectorAll(".area option");
        for(let i=0;i<option.length;i++){
            if(option[i].selected){
                departure = option[i].value;
            }
        }
        var arrive;
        var option2 = document.querySelectorAll(".area2 option");
        for(let i=0;i<option2.length;i++){
            if(option2[i].selected){
                arrive = option2[i].value;
            }
        }
        search(departure,arrive);
    }
    ,false);

在查询按钮上绑定点击事件，当点击时会跑for回圈，逐笔比对每个option，然後将被选到的那个（例如基隆），赋值到变数departure和arrive上面。最後，则是将两个变数带入search()函式，以这两个车站为起讫站去查询班次。

for(var a=0;a<dataLen;a++){
    var willStop = []; //本班车会到的站
    var list = []; //用一个阵列储存物件(物件为{station: "新竹", time: "11:37"}.......)
    var len = data[a].StopTimes.length;
    for(let i=0;i<len;i++){
        var train = {};
        willStop.push(data[a].StopTimes[i].StationName.Zh_tw);
        train.station = data[a].StopTimes[i].StationName.Zh_tw;
        train.time = data[a].StopTimes[i].DepartureTime;
        list.push(train);}

用 for回圈，跑今日台铁车次资料中的每一笔资料，每一笔资料代表一班车。然後用一个变数willStop储存本班车会到达的站。

var thisTrain = {}; //纪录车种车号起讫时间等资料
if(willStop.includes(departure) && willStop.includes(arrive)){
      var stationNum1;//抵达ab站时个给予一个值
      var stationNum2;
      for(let i=0;i<willStop.length;i++){
      if(willStop[i] == departure){
          stationNum1 = i;
      }else if(willStop[i] == arrive){
          stationNum2 = i;
      }else{}
}

当willStop里面有起讫两站时，将这两站在willStop阵列中的编号赋值到变数上。

//当b>a时则符合使用者起讫站需求
if(stationNum2 > stationNum1){
//写入起讫时间
for(let i=0;i<list.length;i++){
      if(list[i].station == departure){
          thisTrain.time1 = list[i].time;
      }else if(list[i].station == arrive){
          thisTrain.time2 = list[i].time;
      }else{}
}

如果一班车开的路线是台北>桃园，那台北在阵列中的编号就会较小，反之，则代表他虽然有通过台北桃园两站，但却是从桃园开往台北的火车，不符合使用者想要的结果。所以透过这个判断，就可以过滤出使用者真正要得到的班次，并写入变数thisTrain中。

if(JSON.stringify(thisTrain) != "{}"){
    myTrain.push(thisTrain);
}

因为是是跑for回圈，每一次代表一班车，当这班车不符合使用者的需要的时候，最後thisTrain就会是空的，所以我们额外用一个变数myTrain把所有不是空的的thisTrain放进去。

myTrain.sort((a, b) => a.time1.localeCompare(b.time1)); 

此时虽然得到了所有a站开往b站的车次资料，但顺序仍是混乱的，所以这里使用sort()来进行阵列的重新排列（以出发时间为排列依据）。

for(let i=0;i<myTrainLen;i++){
     if(myTrain[i].time1 > thisTime){
          var li = document.createElement("li");
          li.innerHTML = '<div class="left"><span class="material-icons ' + myTrain[i].color + '">train</span>' + '<p>' + myTrain[i].TrainTypeName + '  ' + myTrain[i].TrainNo + '</p></div><div class="right"><p>'+ myTrain[i].time1 + '</p>' + '<span class="material-icons">double_arrow</span>' + '<p>'+ myTrain[i].time2 + '</p></div>';
          trainList.appendChild(li);
     }
}

最後跑是跟现在时间做比对，当出发时间＞现在时间(代表这班车今天还没开走)，就组字串最後用innerHTML()写到ul里面成为一个li，就大功告成了。

－－－

本日结语：
今天是三十天！
今天做得是台铁即时时刻表，是一个透过AJAX即时显示查询结果的台铁时刻表网站。也是本次铁人赛我最後一个作品，对於现在的我来说真的是竭尽全力才能完成的作品，如有写错之处麻烦各路高手指教><