5F - 空氣品質監測網 AQI： codepan
Core tech
<aside> 💡 fetch(req).then...return, CORS, Array.slice(n,m) ,Array.filter(item⇒{return}), Array.forEach(item {...}), computed, vm.$set(object, key, value)
</aside>
JS
mounted
說明：此階段需串接 https://data.gov.tw/ 資料開放平台的空氣品質監測資料，需要的格式是JSON，接著利用Fetch 來串接資料取代過往的AJAX，詳細的差別可參考 **此篇** ， Fetch 預設就能 CORS (跨來源資源共用) 的問題，也能在物件中去增加 「mode:'cors'」的屬性來處理，CORS是什麼，請參考 此篇。
Fetch 的使用
//宣告 req，建立一個 new Request 內容包含網址與 Fetch 的物件屬性設定
const URL = '<https://data.epa.gov.tw/api/v1/aqx_p_432?limit=200&api_key=9be7b239-557b-4c10-9775-78cadfc555e9&format=json>'
const req = new Request(`${URL}`, {method: 'GET', cache: 'reload',mode:'cors'})
//用 fetch呼叫請求寫法一樣是請求 response，但這邊注意用respone.json()的方法回傳，return後面用.then連接才能正確使用內容
fetch(req).then((response) => {
return(response.json())
})
.then((myJson) => {... | do something }
抓到 json 資料做處理，處理成自己要的內容
// 1.剔除AQI為空的資料:將每筆資料塞到 data
myJson.records.forEach(item => {
if (item.AQI !== "") {
vm.aqiData.push(item)
}
})
// 2.篩選出區域塞到area: 利用forEach與indexOf篩選重複的唯一值
vm.aqiData.forEach(item => {
if (vm.location.indexOf(item.County) == -1) {
vm.location.push(item.County)
}
})
// 3.抓PublishTime
vm.aqiData.forEach(item => {
if (vm.time.indexOf(item.PublishTime) == -1) {
vm.time = item.PublishTime
}
})
computed
說明：computed 作用在當 data 的資料有變動時能重新渲染頁面，用來重新回傳篩選或是更改過後的內容。
showdist() 作用: 渲染 option 所選城市的地區資料，這邊前台僅呈現[地區與AQI]
// 1.newData 接收所選區域等於vm.aqiData.County相同的資料
showdist(){
const vm = this
let newData = vm.aqiData.filter(item => {
const data = item.County === vm.locationSelected
return data
});
// 2.繼續處理 newData，將 newData 每一筆內容跑if...else 迴圈用 vm.$set 寫入陣列，讓後續能綁定 style 修改指定數值的背景顏色
newData.forEach(item =>{
if (parseInt(item.AQI) >= 0 && parseInt(item.AQI) <= 50) {
vm.$set (item, 'bgColor', '#95F084')
} else if (parseInt(item.AQI) >= 51 && parseInt(item.AQI) <= 100) {
vm.$set (item, 'bgColor', '#FFE695')
} else if (parseInt(item.AQI) >= 101 && parseInt(item.AQI) <= 150) {
vm.$set (item, 'bgColor', '#FFAF6A')
} else if (parseInt(item.AQI) >= 151 && parseInt(item.AQI) <= 200) {
vm.$set (item, 'bgColor', '#FF5757')
} else if (parseInt(item.AQI) >= 201 && parseInt(item.AQI) <= 250) {
vm.$set (item, 'bgColor', '#9777FF')
} else if (parseInt(item.AQI) >= 251) {
vm.$set (item, 'bgColor', '#AD1774')
}
})
vm.distArr = newData
return newData
},
showdistSelected() 作用: 針對所選"地區" 顯示更詳細的內容
// data 中設定一個 distSelected 用來判斷呈現的資料，若有值就會去篩選所選區域中符合地區的內容
if (vm.distSelected !== '') {
let newData = vm.distArr.filter(item =>{
const data = item.SiteName === vm.distSelected
return data
})
// 將distSelected清除，避免下拉式選單選擇新值時無法顯示第一筆資料
vm.distSelected = ''
return newData
}
// 在其他的狀況下，都預設顯示地區中的第一筆資料 Array.slice(0,1)
else {
const data = vm.distArr.slice(0,1)
return data
}
methods
說明：使用者做了什麼動作，會觸發怎樣的內容
selectDistrict(dist): 使用者點選特定區域時，會回傳區域值重新渲染區域詳細空氣品質內容
// data 中設定 distSelected，使用者點選特定區域時會回傳 dist 變數
selectDistrict(dist) {
this.distSelected = dist
}
strengthen
HTML / CSS
JavaScript