Làm cách nào để nhập dữ liệu tệp json cục bộ vào biến JavaScript của tôi?

Chúng tôi có một tệp worker.json trong một thư mục, trong cùng một thư mục, chúng tôi có tệp js, trong đó chúng tôi muốn nhập nội dung của tệp json.

Nội dung của nhân viên.json -

staff.json

"Employees" : [
   {
      "userId":"ravjy", "jobTitleName":"Developer", "firstName":"Ran","lastName":"Vijay",
      "preferredFullName":"Ran Vijay","employeeCode":"H9","region":"DL","phoneNumber":"34567689",
      "emailAddress":"[email protected]"
   },
   {
      "userId":"mrvjy","jobTitleName":"Developer","firstName":"Murli","lastName":"Vijay",
      "preferredFullName":"Murli Vijay","employeeCode":"A2","region":"MU",
      "phoneNumber":"6543565","emailAddress":"[email protected]"
      }
   ]
}

Chúng tôi có thể sử dụng bất kỳ cách nào trong hai cách để truy cập tệp json -

Sử dụng mô-đun yêu cầu

Mã để truy cập staff.json bằng mô-đun yêu cầu -

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

Sử dụng chức năng tìm nạp

Mã để truy cập staff.json bằng cách sử dụng chức năng tìm nạp -

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

Lưu ý - Trong khi chức năng đầu tiên phù hợp hơn với môi trường nút, chức năng thứ hai chỉ hoạt động trong môi trường web vì API tìm nạp chỉ có thể truy cập được trong môi trường web.

Sau khi chạy bất kỳ thao tác nào ở trên bằng cách sử dụng hàm yêu cầu hoặc tìm nạp, kết quả đầu ra của bảng điều khiển như sau -

{
   Employees: [
      {
         userId: 'ravjy',
         jobTitleName: 'Developer',
         firstName: 'Ran',
         lastName: 'Vijay',
         preferredFullName: 'Ran Vijay',
         employeeCode: 'H9',
         region: 'DL',
         phoneNumber: '34567689',
         emailAddress: '[email protected]'
      },
      {
         userId: 'mrvjy',
         jobTitleName: 'Developer',
         firstName: 'Murli',
         lastName: 'Vijay',
         preferredFullName: 'Murli Vijay',
         employeeCode: 'A2',
         region: 'MU',
         phoneNumber: '6543565',
         emailAddress: '[email protected]'
      }
   ]
}