จะนำเข้าข้อมูลไฟล์ json ในเครื่องไปยังตัวแปร JavaScript ของฉันได้อย่างไร

เรามีไฟล์ employee.json ในไดเร็กทอรี ภายในไดเร็กทอรีเดียวกัน เรามีไฟล์ js ซึ่งเราต้องการนำเข้าเนื้อหาของไฟล์ json

เนื้อหาของ Employee.json −

employees.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]"
      }
   ]
}

เราสามารถใช้สองวิธีในการเข้าถึงไฟล์ json -

การใช้โมดูลที่ต้องการ

รหัสเพื่อเข้าถึง Employee.json โดยใช้โมดูลต้องการ -

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

การใช้ฟังก์ชันดึงข้อมูล

รหัสเพื่อเข้าถึง staff.json โดยใช้ฟังก์ชันดึงข้อมูล -

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

หมายเหตุ − แม้ว่าฟังก์ชันแรกจะเหมาะสมกว่าสำหรับสภาพแวดล้อมของโหนด ฟังก์ชันที่สองจะทำงานในสภาพแวดล้อมของเว็บเท่านั้นเนื่องจาก API การดึงข้อมูลสามารถเข้าถึงได้เฉพาะในสภาพแวดล้อมเว็บเท่านั้น

หลังจากเรียกใช้ฟังก์ชันใด ๆ ข้างต้นโดยใช้ฟังก์ชัน require หรือ fetch แล้ว เอาต์พุตคอนโซลจะเป็นดังนี้ -

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