การ Import ข้อมูล JSON ภายในเครื่องเข้า Variable ใน JavaScript

เรามีไฟล์ employees.json ในไดเรกทอรี่เดียวกับไฟล์ JS ที่ต้องการ Import ข้อมูล

เนื้อหา 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"       }    ] }

มี 2 วิธีเข้าถึงไฟล์ JSON −

ใช้ Require Module

โค้ดเข้าถึง employees.json ด้วย Require −

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

ใช้ Fetch Function

โค้ดเข้าถึง employees.json ด้วย Fetch −

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

หมายเหตุ − Require เหมาะสำหรับ Node Environment ส่วน Fetch ใช้ได้เฉพาะ Web Environment เพราะ Fetch API มีแค่ใน Browser

หลังรันด้วย Require หรือ Fetch ผลลัพธ์ Console ดังนี้ −

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