本日作品：
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即時顯示查詢結果的台鐵時刻表網站。也是本次鐵人賽我最後一個作品，對於現在的我來說真的是竭盡全力才能完成的作品，如有寫錯之處麻煩各路高手指教><