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

什麼是 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 | MDN、Day4 — 如何運用JSON 資料

練習

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

程式碼解說：

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

練習心得實錄

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

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

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

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

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