Vue_過濾API資料(實作)

本文总阅读量次

＊過濾目標

使用者經由選擇器篩選縣市後(如下圖)，跳出選定縣市的藥局資料。

第一步是先將raw data分類出select可以導入的縣市資料庫後，接下來就是進行基本的判定式(if/else)再利用陣列語法(filter)匯入顯示頁面。韓式內容大致是新增一變數，如選擇區域欄位是空的，就回傳與city相同的值，如選擇區域是有資料的，那就回傳與區域相同的。

1
2
3
4
5
6
7
8
const pharmacies = this.data.filter(pharmacy => {
    //data裡的area如沒有資訊，則找出與data裡的city相同的縣市
    if (!this.select.area) {
      return pharmacy.properties.county === this.select.city;
    }
    //顯示data裡area區域的資料
    return pharmacy.properties.town === this.select.area;
});

＊統整API資料處理的流程

以實作過兩個作品的經驗來看，把API取得顯示的過程分為四個步驟，串接、分離、核對、顯示，

  1. 串接：javascript有三種方法，請參考API串接語法文章，另外也能使用Vue語法做串接

  2. 分離：一般來說，取得的資料量都非常巨大，勢必是要經過拆解，提供選擇項目以供使用者進行篩選，這時碼就必須先動動腦，什麼資料要在頁面可做篩選，決定後再與select選項欄做串連，就實作經驗而言，可以直接在raw data上做一步步的拆解，如：取得唯一值，又或者直接導入外部資料來源，取得select欄位的顯示資料，可參考select串接就能在畫面上篩選資料，並將資料串連至vue的data變數上

  3. 核對：這邊就能使用陣列語法(filter、forEach、map)等等去刪選並核對顯示的資料內容，此時就能將整理過的資料傳送到data指定變數上

  4. 顯示：經由v-for迴圈，將資料回傳至畫面，除了直接回傳外，有時也會有特別需另外判定的資料，又或者經由Map串接的資料，這都須配合不同的規則去做調整

＊Vue資料過濾流程(Computed & Methods)

選單分類（通常使用Computed）
  • 選項綁定：新增一組字串變數，承接v-model選項的值
  • 資料呈現：是用computed的函式名稱(可當變數)
  • 函式內容：執行filter（代入變數值判定）後回傳給computed函式
  • 執行過程：在頁面選擇項目後(更動變數值)，自動執行filter並回傳
列表分類（Methods）
  • 選項綁定：使用點擊函式，代參數放產品分類名稱
  • 資料呈現：新增一組新陣列放過濾後資料
  • 函式內容：執行filter（代入參數值判定）後回傳給新陣列
  • 執行過程：當點擊函式，將參數載入filter公式，回傳至變數在頁面顯示