如何將本地 json 檔案資料匯入我的 JavaScript 變數？

我們在一個目錄中有一個 employee.json 檔案，在同一目錄中我們有一個 js 檔案，我們希望在其中匯入 json 檔案的內容。

employees.json 的內容 -

employees.json

"Employees" : [
   {
      "userId":"ravjy", "jobTitleName":"Developer", "firstName":"Ran","lastName":"Vijay",
      "preferredFullName":"Ran Vijay","employeeCode":"H9","region":"DL","phoneNumber":"34567689",
      "emailAddress":"ranvijay.k.ran@gmail.com"
   },
   {
      "userId":"mrvjy","jobTitleName":"Developer","firstName":"Murli","lastName":"Vijay",
      "preferredFullName":"Murli Vijay","employeeCode":"A2","region":"MU",
      "phoneNumber":"6543565","emailAddress":"murli@vijay.com"
      }
   ]
}

我們可以使用以下兩種方法之一來訪問 json 檔案 -

使用 require 模組

使用 require 模組訪問 "employees.json" 的程式碼 -

const data = require('./employees.json');
console.log(data);

使用獲取函式

使用 獲取函式 訪問 "employees.json" 的程式碼 -

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

注意 - 雖然第一個函式更適合節點環境，但第二個函式只在 web 環境中工作，因為獲取 API 只能在 web 環境中訪問。

在使用 require 或獲取函式執行上述任何一個函式後，控制檯輸出如下 -

{
   Employees: [
      {
         userId: 'ravjy',
         jobTitleName: 'Developer',
         firstName: 'Ran',
         lastName: 'Vijay',
         preferredFullName: 'Ran Vijay',
         employeeCode: 'H9',
         region: 'DL',
         phoneNumber: '34567689',
         emailAddress: 'ranvijay.k.ran@gmail.com'
      },
      {
         userId: 'mrvjy',
         jobTitleName: 'Developer',
         firstName: 'Murli',
         lastName: 'Vijay',
         preferredFullName: 'Murli Vijay',
         employeeCode: 'A2',
         region: 'MU',
         phoneNumber: '6543565',
         emailAddress: 'murli@vijay.com'
      }
   ]
}

更新於： 12-Sep-2023

33K+ 檢視

開啟你的 職業生涯

完成課程並獲得認證

開始學習
廣告