iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
2
Modern Web

JavaScript 初心者筆記系列 第 17

JavaScript 初心者筆記: 迴圈 + JSON 練習

  • 分享至 

  • xImage
  •  

今天這篇比較偏我個人練習心得,不過既然我的鐵人主題本來就是定位成個人學習筆記,所以我就心安理得地放進來了~


什麼是 JSON?

一種共通性資料交換的格式,用來傳輸由屬性值或者序列性的值組成的資料物件。政府公開資訊平台上有很多領域的資料庫都是有 JSON 格式,讓我們可以去抓下來運用。

抓取 JSON 資料的方法

  1. 土法煉鋼法:開啟 JSON 檔案,複製全部資料,再到自己的 .js 檔案中宣告一個變數,把剛剛複製的資料存進變數裡,之後就可以運用該變數來撈資料了。
  2. AJAX:使用 XMLHttpRequest 物件。

如何運用 JSON 資料

我們有時會接收到文字字串格式的 JSON 資料,必須將之轉換為陣列。且當我們傳送 JSON 資料時,也必須將之轉換為字串才能正確運作。
例如,用瀏覽器儲存資料(local storage)就必須以字串的方式將資料儲存在瀏覽器內,要從瀏覽器取出資料加以運用時,也必須從字串轉為陣列。
因此,我們必須透過以下兩種方法,將資料在陣列及字串中互相轉換。

  • JSON.stringify() - 可將 JavaScript 物件轉換為 JSON 格式字串,便可將 JavaScript 物件自瀏覽器傳遞至其他應用程式。
  • JSON.parse() - 處理 JSON 格式字串,將 JSON 資料轉換為 JavaScript 物件,讓瀏覽器操作運用。

參照:使用 JSON 資料 — 學習該如何開發 Web | MDNDay4 — 如何運用JSON 資料

練習

為了練習迴圈 + JSON,我去台中市政府資料開放平台抓取「百大名攤名店」的資料,設計一個簡單的搜尋功能,用法是輸入行政區,就能找到相應的店家名稱。
我把範例程式碼寫在 codepen,請搭配閱讀。

程式碼解說:

第 7 ~ 9 行:給 DOM (也就是 HTML 元素)設定變數讓 JS 可以控制這些元素,以此範例來說就是 inputbuttonspan 設定變數。
第 10 行:設定空字串,也就是準備讓迴圈去組合出搜尋結果的文字。
第 11 行:讓輸入的文字顯示在 「的店家有:」這一段文字前面,也就是如果輸入「南區」,按鈕送出後就顯示「南區的店家有:」。
第 12 ~ 18 行:跑迴圈顯示店家。
第 13 行:寫 if 判斷,當在 input 輸入文字等於 foodStand 裡面的區域時,就顯示符合的店家。

練習心得實錄

之所以會設計成在 input 裡輸入文字再按搜尋,是因為說到資料庫,我直覺就聯想到搜尋引擎;後來寫完以後發現,如果要輸入的文字是行政區的話,以一般使用習慣來說應該設計成下拉式選單(select)比較適合,不然誰知道有哪些選項可以選……。

可是我嘗試寫另外一個下拉式選單的版本時又遇到了一個問題:當下拉式選單與搜尋鈕(button)同時存在時,選好區域後按下搜尋,會短暫出現搜尋結果,但畫面會馬上閃動一下,然後回復成初始畫面。

我把這個現象拿去問六角助教,得到的回答是:
buttonform 裡面會有預設的 HTML 行為,也就是把表單 sumbit (送出),所以可以在 JS 第 9 行的 function findStand() 裡面加上 preventDefault() 取消預設行為,也就是取消 submit。」

但是我加了 preventDefault() 語法之後,情況還是沒改變。最後我把搜尋按鈕拿掉,用了事件監聽 + change 事件,才達到我想要的效果。

事件監聽 + change 事件會在之後的文章中有比較詳細的紀錄。


上一篇
JavaScript 初心者筆記: 在迴圈中 take a "break"
下一篇
JavaScript 初心者筆記: DOM - 如何用 JS 選取 HTML 元素
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2019-09-18 14:18:34

每次遇到這個就像鬼打牆...=.=

Grete Ma iT邦新手 5 級 ‧ 2019-09-18 14:26:21 檢舉

真的~/images/emoticon/emoticon16.gif

0
sean666
iT邦新手 5 級 ‧ 2020-06-18 16:36:26


改作: 用台中百大名攤名產資料,建構一個可以用區域篩選,顯示出店名、電話與地址

我要留言

立即登入留言