iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

關於學習網頁這檔事系列 第 21

DAY21 JSON檔是什麼&該如何抓取

  • 分享至 

  • xImage
  •  

JSON(JavaScript Object Notation)是一種輕量級的數據交換格式,常用於將數據從一個應用程式傳輸到另一個應用程式。 JSON採用易於閱讀和編寫的文字格式,並且易於解析和生成。 以下是JSON檔的基本概念和介紹:

資料結構

{
    "name": "John Doe",
    "age": 30,
    "isStudent": false,
    "city": "New York"
}
  • JSON數據是以鍵值對(key-value pairs)的形式組織的。
  • 每個鍵(key)都是一個字串(string),通常用雙引弧括起來。
  • 每個值(value)可以是一個字串、數位、布爾值、物件、陣列或null。
  • JSON數據採用大括弧 表示物件,用方括弧 表示陣列。{}``[]

陣列

{
    "fruits": ["apple", "banana", "orange"]
}

JSON陣列是一個有序的值的集合。
陣列中的每個元素可以是字串、數位、布爾值、物件、陣列或null。
陣列元素之間用逗號分隔,用方括弧 包圍。[]

巢狀

{
    "person": {
        "name": "Alice",
        "age": 25
    },
    "hobbies": ["reading", "hiking"]
}

該如何抓取JSON

要使用JavaScript從伺服器或外部源抓取JSON數據,可以使用瀏覽器提供的fetch

fetch('data.json')
  .then(response => response.json())
  .then(data => {
     const nameValue = data.person.name;
     console.log(nameValue); // 打印 "Alice"
  })
  .catch(error => console.error('讀取 JSON 檔案時發生錯誤:', error));

要確保將上述代碼中的 URL https://example.com/api/data.json 替換你要抓取 JSON 數據的實際 URL。


上一篇
DAY20 flex基本樣式介紹
下一篇
DAY22 CSS要怎麼改變形狀(clip-path)
系列文
關於學習網頁這檔事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言