# [JavaScript] 口罩地圖，Select篩選API資料
###### tags: `JavaScript`
###### tags: `Vue.js`

目的：我們透過API取得raw data後，勢必是要將資料經過整理後，呈現在網頁上，而龐大的資料為了要供使用者查詢，會分類資料並納入選擇欄位裡，因此如何將資料導入選擇欄位裡是很基本並常見的程序。

這裡以vue框架作編寫，一般來說，呈現陣列資料必定會使用v-for迴圈，搭配select及option標籤讓資料可以被分類然後被選取

    <label for="city" class="mr-2 col-form-label">縣市</label>
    <select class="form-control"
        id="city"
        v-model="select.city"
        @change="select.area = ''"
        >
        
        <option value>-- 請選擇縣市 --</option>
        <option
          v-for="item in cityName"
          :value="item.CityName"
          :key="item.CityName"
        >{{ item.CityName }}</option>
    </select>

### 執行步驟：
1. 寫入v-for語法至option標籤
2. 將代名詞item.指定到須取得的資料區域，如：item.CityName
3. 取得的資料除了呈現在網頁上，也要使用動態：value回傳至select
4. select需新增v-model同步至資料庫，此時select會接收到:value的選取地點，再回傳至v-model指定的變數裡
5. 經由上面的步驟，資料庫裡就會透過回傳而取得當下選取的指定區域，我們就可以在此資料裡做下一步動作，例如判定等等

### 注意：
* v-for需搭配key設定唯一值
* 別忘記要經由label的for與select的id做串連

<br>

## 當選擇欄位需要兩層過濾資料

狀況：在地圖口罩網站，我們設定了兩個選擇項目，一個是縣市，另一個是鄉鎮，因此下方的程式碼是用來取得鄉鎮的資料，已知select.city的值，再經由find去找到與之符合的縣市，並使用(符合縣市的陣列).AreaList 顯示出鄉鎮資料。

  <select class="form-control"
    id="area"
    v-if="select.city.length"
    v-model="select.area"
    @change="updateSelect" 
  >
    <option value>-- 請選擇地區 --</option>
    <option
      :value="area.AreaName"
      v-for="area in cityName.find((city) => city.CityName === select.city).AreaList"
      :key="area.AreaName"
    >{{ area.AreaName }}</option>
  </select>

先將cityName透過find陣列迴圈取得資料，作用是將資料庫裡的select.city(上方選擇的縣市)與city資料庫裡的縣市名稱做核對，找到第一筆符合資料時就會回傳，然後取的此物件的AreaList子物件當作v-for="A in B"迴圈的B資料庫。

> 這裏採用find迴圈的原因是在外部資料city資料庫裡，縣市是包住所有縣市內的鄉鎮，因此雖然只取得一筆縣市，但find就可以將對應後的縣市裡的所有鄉鎮取出。
>

<br>

## 進行filter將對應地區顯示在頁面

使用filter與select已選項目做配對，媒合後顯示資料

  methods: {
        updateMarker() {
          //取出區域
          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;
          });

<br>

## 總結

基本步驟
1. API 取得陣列全資料
2. 取出分類項目(經由取出唯一值/載入第三方資料)
3. v-for迴圈搭配select及option顯示分類項目
4. select串接v-model將選取的資料名稱傳送到新變數A裡
5. 新變數A進行過濾動作(陣列處理)顯示對應資料