如何导入.js 从 html 导入.json

Question

我不是说英语的公民，我不擅长英语，但我做得最好。

我正在尝试导入一个从 html 导入 json 的 js 文件

.js

import JSON from '../json/menu.json';

(function () {
  function parseMenu(ul, menu) {
    for (var i=0;i<menu.length;i++) {
      if(menu.sub == null) {
        menu.sort(function(a, b) {
          return a.id > b.id ? -1 : a.id > b.id ? 1 : 0;
        });
      }
      var li=$(ul).append('<li><a href="'+menu[i].link+'">'+menu[i].name+'</a></li>');
      if (menu[i].sub!=null) {
        var subul=$('<ul id="submenu'+menu[i].link+'"></ul>');
        $(li).append(subul);
        parseMenu($(subul), menu[i].sub);
      }
    }
  }
  var menu=$('#menu');
  parseMenu(menu, JSON);
});

.json 表格

[ {
     {
     },
     {
     }
   },
   {
     {
     },
     {
     }
   },
   {
   }
]

我试过

<script type="module" src="../js/left.js"></script>
<script type="module" src="../json/menu.json"></script>

在 html

但是我收到以下错误加载模块脚本失败：需要 JavaScript 模块脚本，但服务器响应 MIME 类型为“application/json”。 根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。 in.json

我解决了。

第一的。 更改了变量的名称。 JSON 到菜单

第二。 已删除<script type="module" src="../js/left.mjs"></script>

最后的。 import JSON from '../json/menu.json'; import menus from '../json/menus.json' assert { type: "json" };

Answer 1

我的猜测是您实际上是在尝试将.js用作这部分中的 src：

<script type="module" src="../json/menu.json"></script>

Chrome 目前支持https://github.com/tc39/proposal-import-assertions 。 这允许您告诉浏览器您正在导入一个 json 文件：

import JSON from '../json/menu.json' assert { type: "json" };

顺便说一句，您不应该使用JSON作为变量的名称，因为它是一个内置对象： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Answer 2

这按照我希望的方式为我工作；