上篇的最後取得了 URL
上篇最後「取得 Trello JSON 的 URL」這段，我們取得了卡片的 URL。
下篇，就是本篇，要筆記的是取得資料後的整理，以及處理成一個店家清單的頁面。為了有切換的功能，除了上篇的公館站外，August 另外又建了一個古亭站，兩張卡片的 JSON URL 各自如下：
公館站：https://trello.com/card/5da2c8a3f11397244be7ad22/-.json
古亭站：https://trello.com/card/5da5b564ca7ce5220c35c047/-.json
整理取得的資料
上篇的最後，有說從 Trello 得來的資料結構如下：
每個店家都在 checklists 裡，而地址、電話就是在裡面的 checkItems 中，所以只需要在 fetch 後寫一個 forEach，就可以整理出我們要的資料了：
let shops = {};
Array.prototype.forEach.call(results.checklists, list => {
shops[list.id] = Object.create(null, {
id: { value: list.id },
name: { value: list.name },
site: { value: list.checkItems[0].name },
tel: { value: list.checkItems[1].name }
});
});整理完 console 印出來的結果如下圖：
因為會在切換捷運站的時候，取得不同的 JSON，所以在原始碼的部份寫成 Vue.js 的 methods 來取得，原始碼會附在本文的最後一段。
確認完可以成功取得、整理資料，下一步就是製作一個清單頁。
製作顯示清單頁面
頁面的部份直接拿 Bootstrap 來套，不過樣式的部份改用 Bootswatch 站上的，選用了「Darkly」這個佈景。
基本上用了 Bootstrap 後，因為示範用的頁面比較簡單，也不用怎麼改，最後完成的頁面如下圖：
切換的功能，像捷運站的切換，左側選單點了會更換右側的詳細資訊，用的是 Vue.js，先附上 HTML 的部份，為了方便看架構，會刪掉大部份的 class name。
捷運站選單
用了 v-on:click 跟 v-bind:class 來切換 .active：
<button
type="button"
@click="getShops('公館')"
:class="{ 'active': mrt == '公館' }">公館站</button>
<button
type="button"
@click="getShops('古亭')"
:class="{ 'active': mrt == '古亭' }">古亭站</button>清單卡片部份
用 v-for 丟整理過的店家清單， v-on:click 時執行修改詳細店家的資料：
<div class="card mb-3">
<h5>{{ cardName }} 蔬食店家</h5>
<div>
<button v-for="s in shops"
:class="{ 'active': s.id === shop.id }"
@click="shop = shops[s.id]">{{ s.name }}
</button>
</div>
</div>店家詳細資料
清單點擊後會改變 shop，所以店家詳細資料就是 shop 的值，地圖的部份用 Google Maps Embed API：
<div>
<h5>詳細資訊</h5>
<div>
<h4>{{ shop.name }}</h4>
<p>{{ shop.tel }}</p>
<p>{{ shop.site }}</p>
<div>
<iframe :src="'https://www.google.com/maps/embed/v1/place?key=YOUR_TOKEN&q=' + shop.name"></iframe>
</div>
</div>
</div>iframe 裡的 YOUR_TOKEN 要換成 Google Maps API 的 token。取得 token 的方式可參考這篇：Google Maps API學習筆記 – 1：地圖、標記、客製樣式。
原始碼及 Demo
有了資料跟頁面，整個範例就完成了，原始碼整理放到了 GitHub 上：
https://github.com/letswritetw/letswrite-trello-db
最後完成的 Demo 頁在這：
https://letswritetw.github.io/letswrite-trello-db/
這也太厲害了！居然是用Trello做出來的XD