iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

每天一份前端小作品系列 第 14

【Day14】用JavaScript撈高雄輕軌數據

  • 分享至 

  • xImage
  •  

本日小作品:
https://codepen.io/linchinhsuan/pen/rNeRJpJ

var data = [.......]

這是高雄市政府的open data
來源:
https://data.kcg.gov.tw/dataset/lightrail-trafficvolume

var len = data.length;
var day = 0;
for(var i=0; i<len; i++){
    day += data[i].日均運量;
}

.length將資料長度賦值到變數len上,然後宣告一個變數day=0。
之後用for迴圈,這裡先宣告i=0,當i小於len的時候會跑裡面的程式碼,翻譯成白話文就是迴圈會跑陣列長度的次數。
例如有3筆資料就跑3次。
a = a + b 也可以寫成 a += b
所以 day += data[i].日均運量;意思是每次跑迴圈時將日均運量加到day這個變數上,最終跑完迴圈會得到日均運量資料的總和。

// 每月的日均運量平均值
var average = day/len;
document.getElementById("dayAvg").textContent = average;

將上面得到的day除以len就得到每月的日均運量平均值(有點拗口),然後透過.textContent將內容寫到html上。最終我們就得到了

例如,每月的日均運量平均值為8385.1875人

這一段。

var str = '';
for(var i=0;i<len;i++){
   if(data[i].日均運量 > average*1.5){
       str += "民國" + data[i].年 + "年" + data[i].月 + "月  ";
   } 
}
document.getElementById("mons").textContent = str;

透過if判斷式,當當月的日均運量大於平均數的1.5倍時,執行{}內的程式碼。data[i].年和data[i].月都是從json資料中取值。最後組合成字串,並且累加到變數str上,最後一樣用.textContent將內容寫到html上。
到此我們就得到了

民國107年2月  民國107年12月  民國108年2月

這段。

---

本日結語:
今天是十四天,開始寫js之後一直思考如何把每日練習的for迴圈呀if判斷式具象化的變成小作品,這真不是件容易的事情。


上一篇
【Day13】用JavaScript當電影售票員
下一篇
【Day15】用JavaScript改變骰子顏色
系列文
每天一份前端小作品30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言