내 JavaScript 변수에 로컬 json 파일 데이터를 가져오는 방법은 무엇입니까?

디렉토리에 employee.json 파일이 있고 동일한 디렉토리 내에 json 파일의 내용을 가져오려는 js 파일이 있습니다.

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 모듈을 사용하여 employee.json에 액세스하는 코드 -

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

가져오기 기능 사용

가져오기 기능을 사용하여 employee.json에 액세스하는 코드 -

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

참고 − 첫 번째 기능은 노드 환경에 더 적합하지만 두 번째 기능은 fetch API가 웹 환경에서만 접근할 수 있기 때문에 웹 환경에서만 작동합니다.

require 또는 fetch 기능을 사용하여 위의 항목을 실행한 후 콘솔 출력은 다음과 같습니다. -

{
   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'
      }
   ]
}