在 JavaScript 中載入 JSON 檔案

1. 在 JavaScript 中使用 require() 函式載入 JSON 檔案
2. 在 JavaScript 中使用 fetch() 函式載入 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"
   }
 ]
}