js中以变量的形式导入json文件

升级dejs.vip项目的时候,有这样一个功能点,需要将json作为变量导入到js中,然后将json的内容动态展示到页面中。

json的文件名为:content-type.json

{
    "MIME": {
        "0": "animation\\/narrative",
        "1": "application\\/mspowerpoint",
        "2": "application\\/msword",
        "3": "application\\/oda",
        "4": "application\\/onenote",
        "5": "application\\/pdf"
    },
    "extension": {
        "0": "nml",
        "1": "pot, pps, ppt, ppz",
        "2": "doc, dot",
        "3": "oda",
        "4": "one, onetoc2, onetmp, onepkg",
        "5": "pdf"
    }
}

实现这个需求有两种方式:

  1. 使用 require 模块.通常在nodejs环境中使用。
    使用 require 模块访问content-type.json 的代码。require() 不是标准 JavaScript API 的一部分。 但在 Node.js 中,它是一个具有特殊用途的内置函数。

    const contentTypeJson = require('./content-type.json');
    console.log(contentTypeJson);
    
  2. 使用fetch方法,可直接在js或者页面中使用。
    使用fetch方法获取json代码,该代码可直接放在页面中使用。

    fetch("./content-type.json").then(response => {
     return response.json();
    }).then(contentTypeJson => {
     console.log(contentTypeJson);
     //书写自己的控制逻辑
    });
    
end
  • 作者:kali(作者介绍)
  • 更新时间:2022-07-20 18:09
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:转载站点文章,请附上原文链接
  • 翻译声明:翻译文章会不严谨,请务必附上原文链接
  • 扫描阅读:扫描二维码,手机阅读该文章