JavaScript - 從零開始- Day24 -透過OPEN DATA 取得JSON 資料

在取得Open Data 前，要先認識JSON 資料。

什麼是JSON JSON（JavaScript Object Notation，JavaScript 物件表示法，讀法就有點像是英文名字的... 第12屆iThome鐵人賽 DAY 24 0 ModernWeb JavaScript從零開始系列第 24篇 JavaScript-從零開始-Day24-透過OPENDATA取得JSON資料 12th鐵人賽 javascript TimHsu 2020-09-2409:58:09555瀏覽 在取得OpenData前，要先認識JSON資料。

什麼是JSON JSON（JavaScriptObjectNotation，JavaScript物件表示法，讀法就有點像是英文名字的JASON）是一種由道格拉斯·克羅克福特構想和設計、輕量級的資料交換語言，該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。

儘管JSON是JavaScript的一個子集，但JSON是獨立於語言的文字格式，並且採用了類似於C語言家族的一些習慣。

JSON資料格式與語言無關。

即便它源自JavaScript，但目前很多程式語言都支援JSON格式資料的生成和解析。

JSON的官方MIME類型是application/json，副檔名是.json。

參考來源：維基百科JSON 簡單來說就是一個陣列+物件的文字檔案格式。

取得OPENDATA資料 這次找了一個相關主題：找尋台北市信義區的哺乳室。

身為一個孩子的爸，因為很常在百貨公司找哺乳室，有孩子的人一定了解找不到的窘境，尤其當新手爸媽好不容易有個在外的晚餐時刻，這時孩子解便的時候，就非常需要! 這次我到台北市政府的首頁，找到路徑>>首頁>市政資料館>資訊公開，再找到臺北市政府資料開放平台，如下圖： 點擊後會出現平台首頁： 搜尋哺乳室後，只會出現一個項目，點擊後會出現下方畫面，在選擇API選項(紅框處)，如下圖： 目前網站改成直接下載CVS 會出現一些資訊告訴我們要怎麼取得資料，像是有API位址，資料異動的時間，使用AJAX方法要用GET取得資料。

在練習的時候在chrome檢查工具有發現有三個格式有打錯，所以console無法顯示資料，等有空再去PR台北市政府。

使用Chrome的擴充套件看JSON 複製API網址貼到新視窗的時候，會看到原始的JSON資料(嗯...) 這時候可以下載chrome商店裡面的套件工具，JSONView 安裝套件後就會看到JSON資料清楚很多! 從JSON找出需要的資料 先把JSON資料整個複製到編輯器中，並用一個變數框起來，如下： vardata=[{ ...JSON資料//因為700多筆，太長了，就這樣示意 }] HTML環境 要透過網頁掛載資料，還是需要先設定一下HTML環境。

JavaScript 透過JSON找出台北市信義區百貨賣場的哺乳室。

vardataTotal=data.length;//資料長度 for(vari=0;i