在 JavaScript 中載入 JSON 檔案

Siddharth Swami 2023年1月30日 2021年10月2日
  1. 在 JavaScript 中使用 require() 函式載入 JSON 檔案
  2. 在 JavaScript 中使用 fetch() 函式載入 JSON 檔案
在 JavaScript 中載入 JSON 檔案

JSON 代表 JavaScript Object Notion。它用於在伺服器和客戶端之間共享資料。JavaScript 允許我們載入本地 JSON。

我們將在本文中討論如何載入 JSON 檔案。

我們將閱讀以下 JSON 檔案。

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

在 JavaScript 中使用 require() 函式載入 JSON 檔案

在 JavaScript 中,我們可以使用 require() 方法來載入檔案和模組。這需要儲存它的本地檔案的路徑。在 console.log() 函式的幫助下,它將資料載入到伺服器中並顯示出來。

例如,

const jsonData= require('./students.json'); 
console.log(jsonData);

輸出:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

在 JavaScript 中使用 fetch() 函式載入 JSON 檔案

此函式從儲存檔案的路徑中獲取檔案,然後將該檔案作為 console.data 中的響應返回。此功能僅適用於基於 Web 的環境,因為 fetch API 僅適用於該環境。

讀取檔案後,我們使用 json() 函式解析資料並顯示它。

下面的程式碼演示了上述功能。

fetch("./students.json")
.then(response => {
   return response.json();
})
.then(jsondata => console.log(jsondata));

輸出:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

相關文章 - JavaScript JSON