youbike2.0 即時資料檢視 , 重新整理即可檢視最新狀態

最近每天通勤都會騎 YouBike，最常遇到的狀況就是：走到站點才發現一台車都沒有，或是騎到目的地要還車，結果車柱全滿，只好再繞去下一站。被這件事搞了好幾次之後，我就在想，能不能自己寫個小東西，打開就能看到每個站還有幾台車可以借、幾個位子可以還？

查了一下才發現，臺北市政府其實有把 YouBike 2.0 的即時資料公開出來，是一個 JSON 格式的網址，任何人都可以直接讀取，不用申請帳號也不用 API Key。既然資料都準備好了，那就動手吧！這篇就來記錄一下我怎麼用很短的 JavaScript 把資料抓下來顯示在網頁上。

資料來源長什麼樣子

資料網址是這個：

https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json

直接用瀏覽器打開，會看到一大串密密麻麻的資料，其實它就是一個陣列，裡面每一筆都代表一個站點。我這次用到的欄位只有三個：

• sna：站點名稱
• available_rent_bikes：目前可以借的車輛數
• available_return_bikes：目前可以還車的空位數

其實裡面還有行政區、地址、經緯度、更新時間等等欄位，之後如果想做地圖或篩選功能都用得到，這次先求簡單。

完整程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="youbike2"></div>

    <script>
      fetch('https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json')
      .then(response => response.json())
      .then(data => {
        var text = ''
        for (let i = 0; i < data.length; i++) {
            text += data[i].sna + '&nbsp;======>可借:' + data[i].available_rent_bikes + '&nbsp;可還:' + data[i].available_return_bikes + '<br>'
            console.log(data[i])
        }
        $(".youbike2").html(text)
      });
    </script>
</body>
</html>

程式碼在做什麼

整段的流程其實很單純，大概分成三步：

第一步，用 fetch 去抓資料。fetch 是現在瀏覽器內建的功能，丟一個網址給它，它就會幫你去把內容拿回來。因為網路請求需要時間，所以它不會馬上給結果，而是用 .then() 的方式等資料回來之後再處理。

第二步，把回應轉成 JSON。response.json() 這行會把抓回來的文字轉成 JavaScript 可以直接操作的陣列跟物件，這樣下一個 .then() 拿到的 data 就是整理好的站點陣列了。

第三步，跑迴圈把每個站點組成文字。用 for 迴圈一筆一筆讀，把站名、可借數量、可還數量串在一起，每個站最後加一個 <br> 換行。全部串完之後，再用 jQuery 的 .html() 一次塞進畫面上那個 class 叫 youbike2 的 div 裡面。

中間那行 console.log(data[i]) 是我寫的時候拿來偷看資料用的，按 F12 打開開發者工具，切到 Console 就能看到每一筆完整的內容，想知道還有哪些欄位可以用的話非常方便。正式要放出去的話可以把它刪掉，不然幾千筆資料印出來有點吵。

寫的時候踩到的小坑

一開始我忘了加 <meta charset="UTF-8">，結果站名的中文有時候會變成亂碼，加上去就好了，建議大家寫中文網頁一定要記得放。另外，站點數量真的很多，全部印出來會是一個超長的列表，滑半天也找不到自己要的那一站。之後我打算再加一個搜尋框，輸入站名或行政區就能直接篩選，等做好了再分享。

還有一點，這裡用了 jQuery 只是為了寫 $(".youbike2").html(text) 這行比較順手，其實換成原生的 document.querySelector(".youbike2").innerHTML = text 效果一模一樣，不想多載一個函式庫的話可以這樣改。

實際效果

下面就是直接跑起來的結果（資料是即時的，每次重新整理頁面數字都可能不一樣）：

資料載入中...

整個寫下來不到二十行，就能做出一個隨時看 YouBike 車況的小工具，我覺得很適合拿來當練習 fetch 跟 JSON 的第一個小專案。政府開放資料其實還有很多好玩的，像公車到站時間、停車場空位之類的，之後有空再一個一個玩看看。如果你也有照著做，或是有遇到什麼問題，歡迎在下面留言跟我說！