JavaScript 脚本不会加载要处理的 JSON 文件的内容

Question

我正在尝试将 JSON 文件加载到 JavaScript 脚本中，以便在网页上的 Mustache 脚本中使用。字符串中的 JSON 正确加载，但文件中的相同 JSON 却没有。

这个有效：

function renderHello() {
  var json = JSON.parse('{"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

这不起作用：

function renderHello() {
  var json = JSON.parse('./abc.json');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

我在 abc.json 中尝试过的变体：

{
    "cloudy": "This applies to Snowflake.",
    "classic": "This applies to SQL Server."
}

{"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}

我试过没有成功

var json = './abc.json';

var json = JSON.parse('./abc.json');

var json = JSON.stringify('./abc.json');

var json = JSON.parse(JSON.parse('./abc.json'));

var json = JSON.parse(JSON.stringify('./abc.json'));

Chrome 开发人员工具中经常返回这样的错误：

VM223:1 Uncaught SyntaxError: Unexpected token . in JSON at position 0
    at JSON.parse (<anonymous>)
    at renderHello (render.js:2)
    at onload (docs.html:91)

我在脚本中添加了这些行以显示包含 Mustache 模板的网站文件的位置，因此我知道在哪里找到 abc.json:

   var loc = window.location.pathname;
   var dir = loc.substring(0, loc.lastIndexOf('/'));
   console.log(dir)

文件结构现在是这样的：

--带小胡子的文件-script.html

--abc.json

这可能不相关，但这是 Mustache 脚本，它当然已经可以使用 JSON 作为字符串。

  <body onload="renderHello()">
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
      Hello {{ cloudy }}, {{ classic }}!
    </script>
  </body>

我使用的建站工具不支持 Node 或 Handlebars。

如果完全相关，目标是从产品文档网站页面中的 JSON 文件填充值，以指示哪些段落适用于哪个产品版本。

Answer 1

您需要通过“AJAX”加载文件内容。您无法像您尝试的那样获取内容。

Answer 2

像这样的东西就可以完成这项工作：

function renderHello() {
  
 fetch('https://jsonplaceholder.typicode.com/users/3').then(r=>r.json())
 .then(json=>{
  // var template = document.getElementById("template").innerHTML;
  // var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = JSON.stringify(json,null,2);
 })
}
renderHello();

<pre id="target"></pre>

因为我无法访问您的 abc.json 文件，所以我使用了 http://typicode.com 上的公共资源。

JavaScript 脚本不会加载要处理的 JSON 文件的内容

JavaScript script won't load contents of a JSON file to process

javascript

json

mustache