Tag: JSON

  • JSON與foreach的逐一條列應用。

    JSON與foreach的逐一條列應用。

    [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) – Cool3c

    目的

    JSON 檔案範例:

    臺北市資料大平臺 (data.taipei)


    HTML

    JavaScript

    執行結果

  • RESTful API 是什麼?

    圖片來源: https://itznihal.medium.com/api-rest-api-and-restful-api-7767d9997854

    參考資料如下:


    API 是什麼?

    當我們談論API(應用程式編程界面)時,實際上在討論一種使不同軟體應用程式能夠互相通信和互動的機制。API遵循特定的規則和協議,使不同軟體系統能夠交換資訊、執行操作,而無需了解對方的內部運作細節。API是現代軟體開發中不可或缺的一部分,它使開發人員能夠輕鬆地訪問和使用其他軟體、服務或函式庫的功能。

    *由ChatGPT潤稿


    RESTful 是什麼?

    RESTful(Representational State Transfer)。

    基於一系列原則和約定,確保API具有可伸縮性、簡單性、可理解性和可靠性。

    RESTful API使用HTTP協議進行通信,將資源表示為唯一的URL,使用HTTP方法(如GET、POST、PUT、DELETE等)執行各種操作,資源的表示通常以通用的數據格式最常見的是JSON或XML)進行傳輸。

    RESTful設計風格的一些特點,這些特點有助於更深入了解它的運作方式:

    1. 資源表示:每個資源都有唯一的URL,可以使用HTTP方法對其進行各種操作。
    2. 無狀態性:RESTful通信是無狀態的,每個請求都必須包含所有必要的資訊,服務器不保留客戶端狀態資訊。
    3. 使用HTTP方法:HTTP方法(如GET、POST、PUT、DELETE)執行不同的操作,包括創建、讀取、更新和刪除(CRUD)等操作。
    4. 支援多種數據格式:RESTful API通常支援多種數據格式,最常見的是JSON,簡化了數據交換。
    5. 自描述性:RESTful API提供足夠的信息,使客戶端能夠理解如何使用API,無需深入了解API細節。

    總之,API是軟體開發的關鍵,RESTful是一種重要的API設計風格,使用HTTP協議和設計原則創建可伸縮且易於理解的API。這些概念的理解對於軟體開發至關重要。

    Was this response better or worse?BetterWorseSame

    *由ChatGPT潤稿


    RESTful API 請求資源的方法

    需要包含的元件為:

    • 唯一資源識別符: 伺服器通常使用統一的 URL 來執行資源識別。
    • 方法:通常用 HTTP 來實作,因此需要告訴 Server 用什麼樣的方法操作
      • GET:獲得資源
      • POST:新增資源
      • PUT:修改資源(若原本無資料則新增)
      • PATCH:修改資源(只修改部分資源)
      • DELETE:刪除資源
    • HTTP 標頭:Client 與 Server 之間的中繼資料,當中包含所需參數(路徑參數、Cookie 參數等)

    當我們在使用URL對特定資源請求動作時,首先需要明確我們的意圖

    這就好比在日常生活中,當你想要對某個物品,比如一個杯子,進行操作,但又需要協助時,你必須清晰地表達你希望對這個杯子進行的操作,以使他人能夠理解你的意圖並協助你完成任務,例如「拿杯子」或「丟杯子」。

    在網際網路上也是如此,只不過這裡我們使用的是電腦可理解的語言,例如“GET”這個URL或”DELETE”這個URL。

    動作物品
    日常生活動作拿、丟杯子
    網際網路( 與你的電腦溝通)GET, DELETEURL

    表格內容來源: https://tw.alphacamp.co/blog/rest-restful-api?gclid=CjwKCAjw9-6oBhBaEiwAHv1QvNrYIyfsJRxjXW7dv3h9mqu5q8V0Zz47AqtJFO_HP6N01ufCWITsUxoCfaAQAvD_BwE


    RESTful API 的路由語義化設計

    RESTful API的路由語義化設計是一種設計原則。

    旨在使API的路由(或端點)具有清晰的、易於理解的語義,以便開發人員和用戶能夠更容易地理解和使用API。

    這種設計風格的主要目標是提高API的可讀性、可維護性和可用性

    以下是RESTfuZl API的路由語義化設計的一些重要特點:

    • 使用清晰的URL結構:URL應該具有語義,能夠反映API端點的目的。例如,如果你設計一個部落格應用的API,則可以使用像/posts來表示所有部落格文章,而/posts/{id}則用於單獨一篇文章。
    • 使用HTTP動詞:HTTP方法(GET、POST、PUT、DELETE等)應該與API端點的操作相關聯。例如,使用GET方法來檢索資源,使用POST方法來創建資源,使用PUT方法來更新資源,使用DELETE方法來刪除資源。
    • 使用複數名詞:對於表示多個資源的端點,應該使用複數名詞,例如/users表示所有用戶,而不是/user
    • 使用子資源:如果需要表示資源之間的關係,可以使用子資源路由。例如,/posts/{post_id}/comments表示一篇文章的所有評論。
    • 使用選擇性的篩選器和參數:允許客戶端使用選擇性的篩選器和參數來自訂請求,以便獲取特定子集的資源。例如,/products?category=electronics可以用於檢索特定類別的產品。
    • 使用HTTP狀態碼:使用適當的HTTP狀態碼來指示請求的結果,例如200表示成功,404表示資源不存在,201表示創建成功等。
    • 提供詳細的API文檔:除了清晰的路由設計,還應該提供詳細的API文檔,以幫助開發人員理解如何使用API,包括端點的語義和支持的請求參數。

  • 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檔案

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

    用瀏覽器閱讀該資料