jQuery 練習 - 串接新北市 Youbike 開放資料

Demo

jQuery 練習 - 取得新北市 Youbike 開放數據資料 - Demo

Introduction 介紹

串接新北市政府提供的 Youbike 位置資訊，這個項目將達到以下目標

• 利用 Ajax 取得數據資料
• 解決跨來源資源共用（Cross-Origin Resource Sharing）問題
• 運用 jQuery
• 載入畫面時呈現全部資料
• 可過濾點擊地區

#功能

基礎的 HTML 結構先設定選單，由於選擇區域的顯示數量不一定，所以我們先單純設定選單及待會要放置的項目類別即可

<div class="wrap">
  <div class="header">
    <h1 class="title">新北市 YouBike 租借資訊</h1>
    <div class="select-area">
      <select name="choosePos" id="select">
        <!-- ..... -->
        <option value="五股區">五股</option>
        <option value="八里區">八里</option>
        <option value="淡水區">淡水</option>
        <option value="三芝區">三芝</option>
        <option value="石門區">石門</option>
      </select>
    </div>
  </div>
  <hr />
  <section id="site-content">
    <div class="site-items"></div>
  </section>
</div>

先設定監聽事件，並且觸發事件的時候，到時會先呈現所有的資料

$(document).ready(function() {
  $("#select").change(function(e) {
  $("#select")
    .val("all")
    .trigger("change");
});

接著使用 jQuery.ajax() 取得 XMLHttpRequest 物件，並且使用跨域代理伺服器(CORS PROXY)，解決讀取第三方網站資料問題。否則在系統控制台會出現以下訊息：

$(document).ready(function() {
  const URI =
    "https://cors-anywhere.herokuapp.com/https://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000352-001";
  $("#select").change(function(e) {
    $.ajax({
      url: URI,
      success: function(responseObject) {
        let location = responseObject.result.records;
      }
    });
  });
  $("#select")
    .val("all")
    .trigger("change");
});

成功取得資料

接著設定一個變數是我們待會要將篩選資料放置到畫面上的位置，並且以 each(function(index,element)遍歷我們取得的資料，index是個別資訊在全部資料中的索引位置，要取得它們的值接著依序將它們各自存入變數中。

$(document).ready(function() {
  $("#select").change(function(e) {
    let chooseArea = e.target.value;
    $.ajax({
      url: URI,
      success: function(responseObject) {
        let location = responseObject.result.records;
        let str = "";
        $.each(location, function(index, value) {
          let stationName = value.sna;
          let updateTime = value.mday;
          let bikeAvailble = value.sbi;
          let parkingSpace = value.bemp;
          let addCN = value.ar;
          let addEn = value.sareaen;
          let stationEn = value.snaen;
          let stationInfo =
            '<div class="site-item">' +
            '<div class="site-name">' +
            '<div class="station">' +
            stationName +
            "</div>" +
            '<div class="update-time">' +
            "更新：" +
            updateTime +
            "</div>" +
            "</div>" +
            ' <div class="site-info">' +
            '<div class="site-bike">' +
            "可租借數量：" +
            bikeAvailble +
            "</div>" +
            '<div class="site-empty">' +
            "可還空位數:" +
            parkingSpace +
            "</div>" +
            '<div class="site-add">' +
            "地址：" +
            addCN +
            "</div>" +
            '<div class="sareaen">' +
            "Area:" +
            addEn +
            "</div>" +
            '<div class="snaen">' +
            "Site-Name:" +
            stationEn +
            "</div>" +
            "</div>" +
            "</div>";
        });
      }
    });
  });
});

設定條件，如果點擊選單的地區值等於所取得的遠端資料的地區值，則將相關資料放置到畫面上；如果選擇的區域是顯示全部，則放入所有取回的資料。

$(document).ready(function() {
  const URI =
    "https://cors-anywhere.herokuapp.com/https://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000352-001";
  $("#select").change(function(e) {
    let chooseArea = e.target.value;
    $.ajax({
      url: URI,
      success: function(responseObject) {
        let location = responseObject.result.records;
        let str = "";
        $.each(location, function(index, value) {
          //...
          if (chooseArea == value.sarea) {
            str += stationInfo;
          } else if (chooseArea == "all") {
            str += stationInfo;
          }
          $(".site-items")
            .hide()
            .html(str)
            .fadeIn(400);
        });
      }
    });
  });
});