iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

JavaScript基礎30天系列 第 7

JSON DAY07

今天要來介紹
什麼是JSON/images/emoticon/emoticon07.gif
我們先看看MDN的介紹!!
https://ithelp.ithome.com.tw/upload/images/20200921/20123039PtRUpiq1yf.jpg

再來看看
政府opendata所提供的JSON
https://ithelp.ithome.com.tw/upload/images/20200921/201230394qKkk9XUjX.jpg
參考來源 : https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=5
不過觀看JSON格式之前
先建議安裝此插件 (JSON Viwer)
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related?hl=zh-TW
這會讓你比較容易觀看JSON的資料

會發現其實JSON就是陣列包著物件
這我們之前所學的是不是很雷同!!!
於是我們就可以開始撈資料啦~~~
不過要提醒撈資料有兩種方法
第一種: 為將資料直接寫在你的程式碼內(不建議)
第二種: 利用ajax 若是vue 則可以使用vue-axios


我們拿台中市政府的opendata來做範例
https://opendata.taichung.gov.tw/dataset/3b71843c-1a9f-11e8-8f43-00155d021202/resource/a235fc27-61e8-4c81-a00d-86f2fd9e7931?inner_span=True
我們先來看 這個JSON 總共有幾筆資料
https://ithelp.ithome.com.tw/upload/images/20200921/20123039YJpmeb6TX4.jpg

再來看怎麼利用for與if來篩選資料
https://ithelp.ithome.com.tw/upload/images/20200921/20123039Ykm7i6fpRw.jpg

今天的JSON基礎介紹就到此告一段落
明天我們會開始介紹DOM/images/emoticon/emoticon08.gif


上一篇
迴圈 Day06
下一篇
DOM基礎介紹 DAY08
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言