如何将本地 json 文件数据导入到我的 JavaScript 变量中？
javascriptweb developmentobject oriented programming
我们在目录中有一个 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);
使用 fetch 函数
使用 fetch 函数访问"employees.json"的代码 −
fetch("./employees.json")
.then(response => {
return response.json();
})
.then(data => console.log(data));
注意 - 虽然第一个函数更适合节点环境，但第二个函数仅适用于 Web 环境，因为 fetch API 仅在 Web 环境中可访问。
使用 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' } ] }
