Front-End JavaScript

Javascript -JSON 格式介紹與實作

JSON是什麼

JSON(JavaScript Object Notation)是一種輕量級的數據交換格式, 是 Javascript Object Notation 的縮寫。

通常先學 Javascript 再學 JSON ,因為它是 Javascript 衍生出的一項功能。 JSON 是根據 JavaScript 的物件實字 (object literal) 發展出來的。

市面上也有另一個資料交換格式 XML,許多.Net 專案也是常常在使用。之後我在寫一篇文章介紹!

本文章參考資料:

https://tw.alphacamp.co/blog/json

https://miniaspreading.github.io/guide-to-json/1-what-is-json.html

https://blog.csdn.net/weiwei9363/article/details/117805722


JSON 與 XML

XML (Extensible Markup Language) 是一種描述語言。 資料的描述在本質上與 JSON 類似。 使用XML中的Tags進行描述,工作量較大。 資料不僅可以透過標籤來描述,還可以透過屬性(例如:文字)來描述。 因此,當交換資料時,發送方和接收方必須具有關協定方便非常明確的資訊。

相較之下,JSON 中的結構非常靈活,在任何情況下都可以被接收者完全理解,並且無需事先達成任何結構協議即可轉換為物件。

因此,XML適合定義明確的資料接口,JSON適合靈活的資料交換。

給予支持-是我繼續寫下去的動力

JSON格式

Copy 過來的時候,OpenData一開始是不會這麼乾淨的!

以下是在Javascript 整理好的畫面。

JSON 資料來源

以下不囉嗦,直接示範給你看看!

https://data.kcg.gov.tw/

開放資料的內容

開放JSON資料

點選進去的之前,瀏覽器建議安裝JSON View。(下方安裝連結)

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=zh-TW

JSON資料-檢視網頁原始資料

進入網頁原始資料

你會發現官方給的資料非常不易整理,我們會需要整理工具。

以下工具可幫助你JSON整理格式!

https://jsoneditoronline.org/

https://jsonformatter.curiousconcept.com/

https://tw.piliapp.com/json/formatter/

https://coding.tools/tw/json-formatter


開啟VS 建立一個新的JS檔案

新增一個空物件,等會賦予裡面的資料。

用瀏覽器閱讀該資料

lioajimzen

Share
Published by
lioajimzen

Recent Posts

Vue – 運行ES Module,import與export

import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module(模組)…

12 months ago

當你的Windows應用程式完全無法執行時,該怎麼辦?

作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開,不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…

2 years ago

Python environments in VS Code-建立虛擬環境

Python environments in VS CodePython-建立虛擬環境

2 years ago

Node.js 核心模組-create-server

Node.js可以提供你很多模組,今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…

2 years ago

Node.js require、module以及exports 模組設定

針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分,稱為模塊。 下面將逐一介紹這些概念,以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module(模組)…

2 years ago

JSON與foreach的逐一條列應用。

像是很多專案必須讀取國家資料中心的metadata,許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲;拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15, 抓取空位數量 <15。…

2 years ago