TDX 回傳的原始 JSON 資料欄位很多，對初學者來說第一次看到可能會眼花。

今天的任務是把它整理成我們自己好用的格式。

TDX 原始資料長什麼樣子（簡化示意）

[
  {
    "StopName": { "Zh_tw": "台北車站" },
    "EstimateTime": 180,
    "StopStatus": 0
  },
  {
    "StopName": { "Zh_tw": "西門" },
    "EstimateTime": 420,
    "StopStatus": 0
  }
]

其中 EstimateTime 是預估到站秒數，StopStatus 是站點狀態（0 表示正常）。

寫一個資料清理函式

在 src/api/tdx.js 新增一個轉換函式，把原始資料轉成我們自己定義的簡潔格式：

// src/api/tdx.js（新增）
export function normalizeArrivals(rawData) {
  return rawData
    .filter((item) => item.StopStatus === 0) // 只保留正常狀態的站點
    .map((item) => ({
      stopName: item.StopName?.Zh_tw ?? '未知站名',
      etaMinutes: item.EstimateTime != null
        ? Math.round(item.EstimateTime / 60)
        : null,
    }));
}

這個函式做了兩件很重要的事：

1. 過濾 掉狀態異常的資料（例如車輛未發車、資料異常）。
2. 轉換單位 ，把秒數換算成分鐘，並用 ??（nullish coalescing）處理缺值，避免畫面出現 undefined。

為什麼要獨立寫清理函式？

很多初學者會把「抓資料」跟「處理資料」寫在同一個函式裡，這樣的問題是：一旦 TDX 改了欄位格式，你要改的地方會散落在整個專案。

把清理邏輯獨立出來，之後只要改這一個函式，其他地方完全不用動，這也是延續 Day 3 提到的「關注點分離」原則。

小測試

import { fetchBusArrivals, normalizeArrivals } from './api/tdx.js';

fetchBusArrivals('Taipei', '0100000A00').then((raw) => {
  console.log('整理後資料：', normalizeArrivals(raw));
});

明天，我們就要把這份整理好的資料，實際顯示在網頁畫面上了。