# [JavaScript] 案例：取得過濾過的API資料
###### tags: `JavaScript`

第一步是先將raw data分類出select可以導入的縣市資料庫後，接下來就是進行基本的判定式(if/else)再利用陣列語法(filter)匯入顯示頁面。

### filter陣列過濾：取得符合條件的資料

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;
 });

filter陣列語法是新增一變數，如選擇區域欄位是空的，就回傳與city相同的值，如選擇區域是有資料的，那就回傳與區域相同的。

## 解析顯示資料的方法

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

* 串接：javascript有三種方法，請參考[API串接語法文章](https://hackmd.io/x32CPRvvQRSqYVA06Xocdw)，另外也能使用Vue語法做串接

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

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

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

## 過濾資料觸發方式

#### 選單分類（computed）
* 選項綁定：新增一組字串變數，承接v-model選項的值
* 資料呈現：是用computed的函式名稱(可當變數)
* 函式內容：執行filter（代入變數值判定）後回傳給computed函式
* 執行過程：在頁面選擇項目後，computed自動執行filter並回傳

#### 列表分類（methods）
* 選項綁定：使用點擊函式，代參數放產品分類名稱
* 資料呈現：新增一組新陣列放過濾後資料
* 函式內容：執行filter（代入參數值判定）後回傳給新陣列
* 執行過程：當點擊函式，將參數載入filter公式，回傳至變數在頁面顯示