加载本地 JSON 文件

Posted 2023-02-22

技术标签:

【中文标题】加载本地 JSON 文件【英文标题】：Loading local JSON file 【发布时间】：2011-11-12 21:04:39 【问题描述】：

我正在尝试，但它不起作用。这是我的 javascript 代码（使用 jQuery）：

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

test.json 文件：

"a" : "b", "c" : "d"

什么都没有显示，Firebug 告诉我data 未定义。在 Firebug 中我可以看到 json.responseText 并且它很好并且有效，但是当我复制该行时很奇怪：

 var data = eval("(" +json.responseText + ")");

在 Firebug 的控制台中，它可以工作，我可以访问数据。

有人有解决办法吗？

【问题讨论】：

当您返回一个JSON 字符串时，您已经在检索一个javascript 对象，无需使用eval()。什么叫“本地”json 文件？本地浏览器还是服务器？你没有给我们足够的细节。文件test.json 没有指定任何路径，因此它是一个相对URI，相对于访问它的页面的位置。因此，就像@seppo0010 所说，如果页面位于某个远程服务器上，它将是服务器本地的，如果页面位于通过file:// 协议访问的本地文件系统中，它将相对于您的计算机。 @seppo0010 它在我的磁盘上位于同一文件夹中。我是第一次加载本地文件，不知道为什么加载 url 更容易，因为我认为我必须这样做。即从相对路径加载 JSON 文件 【参考方案1】：

$.getJSON 是异步的，所以你应该这样做：

$.getJSON("test.json", function(json) 
    console.log(json); // this will show the info it in firebug console
);

【讨论】：

你真的可以访问本地文件吗？不，不能是文件，必须由网络服务器提供。绝对正确。 Chrome 的安全性比 Firefox 或其他的要严格得多。使用 xhr、Josn、Xml 等加载任何内容几乎都被 Chrome 锁定了，除了一两件事。我试过这个，但没有运气。控制台也没有错误:( Chrome 允许您访问本地 JSON 或其他数据文件，如果您使用 --allow-file-access-from-files 标志启动它。我在版本 34.0.1847.131 m 上使用上面的代码检查了这一点；它也应该适用于其他版本。【参考方案2】：

我也有同样的需求（测试我的 angularjs 应用程序），我发现的唯一方法是使用 require.js：

var json = require('./data.json'); //(with path)

注意：文件加载一次，后续调用将使用缓存。

更多关于使用 nodejs 读取文件：http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js：http://requirejs.org/

【讨论】：

如果你是在开玩笑，那么记得做jest.dontMock('./data.json');，否则结果是空的。可能对那里的人有用:) 这段代码的上下文是什么？你用json做什么？请提供完整示例：我收到错误消息：has not been loaded yet for context: _. Use require([]) require 在浏览器上不起作用，因为它是 node.js 模块。如果 OP 想在浏览器中加载它，应该使用 fetch 是正确的解决方案。是的，require 是针对 node 的，但是 requireJS 也可以在浏览器中使用：“RequireJS 是一个 JavaScript 文件和模块加载器。它针对浏览器内使用进行了优化，但它也可以用于其他JavaScript 环境，例如 Rhino 和 Node。”【参考方案3】：

现在，您可以以更现代的方式使用Fetch API：

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

所有现代浏览器都支持 Fetch API。（Internet Explorer 没有，但 Edge 有！）

来源：

Using Fetch

Fetch in Action

Can I use...?

【讨论】：

在使用 Fetch API 时，是否仍然禁止访问本地文件，除非您禁用安全设置？ @LarsH 显然是的，我今天早上试过了，但 fetch api 无法使用 file:// 方案读取本地 json 文件。这种方法看起来很干净，但你不能将它用于本地文件 @keysl 好的，我想出于安全原因可能必须这样。（你说得对，我的意思是“禁止通过file:// 方案访问文件。）但这是一个很好的干净方法。感谢这个答案，我已经开始使用它了。您无法使用 fetch API 访问本地文件 fetch 仅支持 HTTP(S) 协议！【参考方案4】：

如果您想让用户选择本地 json 文件（文件系统上的任何位置），则以下解决方案有效。

它使用 FileReader 和 JSON.parser（并且没有 jquery）。

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() 
    var input, file, fr;

    if (typeof window.FileReader !== 'function') 
      alert("The file API isn't supported on this browser yet.");
      return;
    

    input = document.getElementById('fileinput');
    if (!input) 
      alert("Um, couldn't find the fileinput element.");
    
    else if (!input.files) 
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    
    else if (!input.files[0]) 
      alert("Please select a file before clicking 'Load'");
    
    else 
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    

    function receivedText(e) 
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    
  
</script>

</body>
</html>

这里是 FileReader 的一个很好的介绍：http://www.html5rocks.com/en/tutorials/file/dndfiles/

【讨论】：

IE 8 或 9 不支持 FileReader API，但其他浏览器都可以：caniuse.com/#search=filereader 它在 Chrome 中完美运行，您将在 newArr 中看到您的数据这个答案很好，有点不同，因为它没有使用 jQuery。【参考方案5】：

如果您正在寻找快速而肮脏的东西，只需将数据加载到 HTML 文档的头部即可。

数据.js

var DATA = "a" : "b", "c" : "d";

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function()
   console.log(DATA); // "a" : "b", "c" : "d"
)();

我应该提一下，您的堆大小（在 Chrome 中）约为 4GB，因此如果您的数据大于该大小，您应该寻找另一种方法。如果你想检查另一个浏览器试试这个：

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

【讨论】：

你说 AMD 可以工作是对的，但我不认为 AMD 是正确的解决方案。最简单的是使用 $.getJSON。谢谢 @PatrickBrowne 是的，getJSON 是一个很好的解决方案，但我认为在很多情况下你会遇到跨域问题（例如从 S3 加载数据）。我发现这对我来说是最简单的解决方案。 JSON 文件看起来几乎相同，因此没有多余的杂乱（只有文件顶部的“var xyz =”）。没有人希望他们的代码中有大数据文件。这在很多层面都是错误的，我不明白它怎么有这么多票，这里解释更多如果有人想看codepen.io/KryptoniteDove/post/…“许多例子会证明你可以访问数据使用如下所示的简单函数。事实上，这并不是真正加载 JSON 文档，而是创建 Javascript 对象。这种技术不适用于真正的 JSON 文件。" 老实说，如果您只有一些预先准备好的数据并且您想提供静态页面，这是一个很好的解决方案【参考方案6】：

如何使用`XMLHttpRequest`加载本地的`json`文件

ES5 版本

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

function loadJSON(callback) 
  var xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  xObj.open('GET', './data.json', true);
  // 1. replace './data.json' with the local path of your file
  xObj.onreadystatechange = function() 
      if (xObj.readyState === 4 && xObj.status === 200) 
          // 2. call your callback function
          callback(xObj.responseText);
      
  ;
  xObj.send(null);


function init() 
  loadJSON(function(response) 
    // 3. parse JSON string into JSON Object
    console.log('response =', response);
    var json = JSON.parse(response);
    console.log('your local JSON =', JSON.stringify(json, null, 4));
    // 4. render to your page
    const app = document.querySelector('#app');
    app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
  );


init();

<section id="app">
   loading...
</section>

ES6 版本

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

const loadJSON = (callback) => 
  const xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  // 1. replace './data.json' with the local path of your file
  xObj.open('GET', './data.json', true);
  xObj.onreadystatechange = () => 
      if (xObj.readyState === 4 && xObj.status === 200) 
          // 2. call your callback function
          callback(xObj.responseText);
      
  ;
  xObj.send(null);


const init = () => 
  loadJSON((response) => 
      // 3. parse JSON string into JSON Object
      console.log('response =', response);
      const json = JSON.parse(response);
      console.log('your local JSON =', JSON.stringify(json, null, 4));
      // 4. render to your page
      const app = document.querySelector('#app');
      app.innerHTML = `<pre>$JSON.stringify(json, null, 4)</pre>`;
  );


init();

<section id="app">
   loading...
</section>

在线演示

https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html

【讨论】：

@Pier 如果您使用本地应用服务器，例如 Tomcat 或 Xampp 或 Jboss 。脚本工作 @MirkoCianfarani 确实是因为您没有使用file:/// 协议，并且该文件不再被视为本地文件。 @xgqfrms Fetch API 很棒！ //xobj.status 是整数 xobj.status === "200" 应该是 xobj.status === 200 这个问题明确地说是“本地文件”，所以不是通过 HTTP。【参考方案7】：

我不敢相信这个问题已经回答了多少次，但没有理解和/或使用原始海报的实际代码解决问题。也就是说，我自己是一个初学者（只有 2 个月的编码）。我的代码确实运行良好，但随时建议对其进行任何更改。 解决方法如下：

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON('url': "http://spoonertuner.com/projects/test/test.json", 'async': false);  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

下面是编写我上面提供的相同代码的更短的方法：

var json = JSON.parse($.getJSON('url': "http://spoonertuner.com/projects/test/test.json", 'async': false).responseText);

您也可以使用 $.ajax 代替 $.getJSON 以完全相同的方式编写代码：

var json = JSON.parse($.ajax('url': "http://spoonertuner.com/projects/test/test.json", 'async': false).responseText);

最后，最后一种方法是将 $.ajax 包装在一个函数中。我不能把这个归功于这个，但我确实对其进行了一些修改。我对其进行了测试，它可以工作并产生与我上面的代码相同的结果。我在这里找到了这个解决方案 --> load json into variable

var json = function () 
    var jsonTemp = null;
    $.ajax(
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) 
            jsonTemp = data;
        
    );
    return jsonTemp;
(); 

document.write(json.a);
console.log(json);

您在上面的代码中看到的 test.json 文件托管在我的服务器上，并且包含他（原始发帖人）发布的相同 json 数据对象。


    "a" : "b",
    "c" : "d"

【讨论】：

您不理解问题中“本地文件”的含义：不是 HTTP。它就像一个魅力，解释也正确！【参考方案8】：

我很惊讶没有提到从 es6 导入（与小文件一起使用）

例如：import test from './test.json'

webpack 2json-loader 作为 .json 文件的默认值。

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

对于 TypeScript：

import test from 'json-loader!./test.json';

TS2307 (TS) 找不到模块 'json-loader!./suburbs.json'

为了让它工作，我必须先声明模块。我希望这可以为某人节省几个小时。

declare module "json-loader!*" 
  let json: any;
  export default json;


...

import test from 'json-loader!./test.json';

如果我尝试从json-loader 中省略loader，我会从webpack 收到以下错误：

重大更改：不再允许省略“-loader”后缀使用装载机时。你需要指定'json-loader'而不是'json'，见https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

【讨论】：

简单明了。网页加载文件时不能使用es6 import语句：协议。【参考方案9】：

从头开始添加到您的 JSON 文件中

var object1 = [

最后

保存

然后用纯js作为加载它

<script type="text/javascript" src="1.json"></script>

现在您可以将它用作 object1 - 它已经加载了！

在 Chrome 中完美运行，无需任何额外的库

【讨论】：

但最好将其重命名为1.js【参考方案10】：

最近D3js可以处理本地json文件了。

这就是问题 https://github.com/mbostock/d3/issues/673

这是 D3 使用本地 json 文件的补丁程序。 https://github.com/mbostock/d3/pull/632

【讨论】：

这个答案将通过一个如何使用 D3 读取 json 文件的示例得到很大改进。【参考方案11】：

尝试（不成功）加载本地 json 文件时发现此线程。这个解决方案对我有用...

function load_json(src) 
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try 
    element.parentNode.removeChild(element);
   catch (e) 
    //
  

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)

...而且是这样使用的...

load_json("test2.html.js")

...这是<head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

【讨论】：

这似乎不太可重用。例如，如果 json 文件由远程服务器提供服务，则 100 毫秒超时可能不足以加载。而且由于时间取决于客户端的连接速度，因此您必须为连接速度较慢的客户端设置很长的超时时间。简而言之，不应该使用 setTimeout 来等待资源的加载。 Kenny806 - 它旨在解决一个特定问题 - 加载本地资源（对于非托管网页），所以这确实意味着它不是很可重用。有 1000 种用于 Web 托管页面的资源加载解决方案。这不是解决方案，而是a 解决方案。更改超时非常简单。通过删除超时，您是否建议可以接受无限等待？我不是建议无限等待，我建议使用一种技术，让您在文件加载完成后立即对其作出反应。我的超时问题是，您总是必须等待它完成。即使文件会在 10 毫秒内加载，您仍然会等待 100 毫秒。是的，调整超时很容易，但是您的建议是每次要加载不同的文件或文件大小更改时更改代码（以优化等待）。恕我直言，这样的解决方案是错误的，将来可能会引起很多麻烦，尤其是当其他人尝试使用它时。任何使用这个脚本的人都应该将它作为他们自己脚本的基础。您有权就此脚本是否错误发表意见。为什么不建议替代解决方案？这绝对不适用于所有用例。它对我有用，从本地 html 页面加载本地文件。我在这个问题上分享了我的解决方案，希望它可以帮助其他人。您是否尝试加载本地资源？为什么不根据您正在加载的文件将超时值作为变量传递？本地文件上的 Ajax 非常有限。您最好使用 onreadystatechange 或 onload 并给它们一个函数。 script.onload = 函数名；【参考方案12】：

我所做的是稍微编辑 JSON 文件。

myfile.json => myfile.js

在 JSON 文件中，（将其设为 JS 变量）

name: "Whatever" => var x = name: "Whatever"

最后，

export default x;

那么，

import JsonObj from './myfile.js';

【讨论】：

【参考方案13】：

在 TypeScript 中，您可以使用 import 来加载本地 JSON 文件。例如加载一个 font.json：

import * as fontJson from '../../public/fonts/font_name.json';

这需要一个 tsconfig 标志 --resolveJsonModule:

// tsconfig.json


    "compilerOptions": 
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true

更多信息请参见 typescript 的发行说明：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

【讨论】：

可能会写得更详细，因为答案有点不清楚。这需要将 TypeScript 转换为 JavaScript。对于要直接加载本地 JSON 文件的快速 HTML 而言，这不是一个简单的解决方案（问题中提到了“本地文件”）。【参考方案14】：

在 Angular（或任何其他框架）中，您可以使用 http get 加载我使用它是这样的：

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

希望这会有所帮助。

【讨论】：

问题是关于 file:// 加载上下文。【参考方案15】：

我喜欢使用的一种方法是使用对象文字填充/包装 json，然后使用 .jsonp 文件扩展名保存文件。此方法还使您的原始 json 文件 (test.json) 保持不变，因为您将使用新的 jsonp 文件 (test.jsonp)。包装器上的名称可以是任何名称，但它必须与用于处理 jsonp 的回调函数名称相同。我将使用您发布的 test.json 作为示例来显示“test.jsonp”文件的 jsonp 包装添加。

json_callback("a" : "b", "c" : "d");

接下来，在脚本中创建一个具有全局范围的可重用变量来保存返回的 JSON。这将使返回的 JSON 数据可用于脚本中的所有其他函数，而不仅仅是回调函数。

var myJSON;

接下来是一个简单的函数，通过脚本注入来检索您的 json。注意这里不能使用 jQuery 将脚本追加到文档头部，因为 IE 不支持 jQuery 的 .append 方法。下面代码中注释掉的 jQuery 方法将适用于其他支持 .append 方法的浏览器。包含它作为参考以显示差异。

function getLocalJSON(json_url)
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)

接下来是一个简短的回调函数（与jsonp包装器同名），用于将json结果数据放入全局变量中。

function json_callback(response)
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document

现在可以通过脚本的任何函数使用点表示法访问 json 数据。举个例子：

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

此方法可能与您习惯看到的有些不同，但有很多优点。首先，可以在本地加载相同的 jsonp 文件，也可以使用相同的功能从服务器加载相同的 jsonp 文件。作为奖励，jsonp 已经是跨域友好格式，也可以轻松地与 REST 类型的 API 一起使用。

当然，没有错误处理功能，但你为什么需要一个呢？如果您无法使用此方法获取 json 数据，那么您几乎可以打赌 json 本身存在一些问题，我会在一个好的 JSON 验证器上检查它。

【讨论】：

【参考方案16】：

您可以将您的 json 放入一个 javascript 文件中。这可以使用 jQuery 的 getScript() 函数在本地（甚至在 Chrome 中）加载。

map-01.js 文件：

var json = '"layers":6, "worldWidth":500, "worldHeight":400'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) 
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    )
    .fail(function (jqxhr, settings, exception) 
        console.log("error loading map: " + exception);
    );

输出：

world width: 500

注意json变量是在js文件中声明和赋值的。

【讨论】：

【参考方案17】：

$.ajax(
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) 

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) 
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) 
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      
                 );


             
  );

【讨论】：

与其他答案相比，这是一段不同的代码。测试发现这不适用于 file:/// 协议。【参考方案18】：

如果您对 JSON 使用本地数组 - 正如您在问题 (test.json) 中的示例中所示，那么您可以使用 JQuery 的 parseJSON() 方法 ->

var obj = jQuery.parseJSON('"name":"John"');
alert( obj.name === "John" );

getJSON() 用于从远程站点获取 JSON - 它不会在本地工作（除非您使用本地 HTTP 服务器）

【讨论】：

是的，但是如何加载本地 JSON 文件？这并不能真正回答问题。 @Stefan 读了最后一句——你不能这与要求的答案完全相反【参考方案19】：

我没有找到任何使用 Google 的 Closure 库的解决方案。因此，为了完成未来访问者的列表，以下是使用 Closure 库从本地文件加载 JSON 的方法：

goog.net.XhrIo.send('../appData.json', function(evt) 
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
);

【讨论】：

【参考方案20】：

json_str = String.raw`["name": "Jeeva", "name": "Kumar"]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

我为我的 cordova 应用程序这样做了，就像我为 JSON 创建了一个新的 javascript 文件并将 JSON 数据粘贴到 String.raw 然后用 JSON.parse 解析它

【讨论】：

如果它是一个 javascript 文件，为什么要做一个对象而不是简单地使用 JavaScript Object Notation (JSON): obj = ["name": "Jeeva", "name": "Kumar"] 我使用它是因为我使用 ajax 获取了一些 json 数据，这些数据以字符串形式出现，所以我使用 JSON.parse 转换为 JavaScript 对象在脚本中嵌入 JSON 数据不是问题。【参考方案21】：

function readTextFile(srcfile) 
        try  //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) 
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            

         catch (e) 

        


readTextFile("C:\\Users\\someuser\\json.txt");

我所做的是，首先，从网络选项卡中，记录服务的网络流量，然后从响应正文中，复制 json 对象并将其保存在本地文件中。然后用本地文件名调用函数，应该可以在上面的 jsonOutout 中看到 json 对象。

【讨论】：

请解释您的解决方案，而不是仅仅粘贴代码。只有解释其如何解决问题的解决方案才能对社区有所帮助。注意：需要 InternetExplorer【参考方案22】：

对我有用的是：

输入：

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Javascript 代码：

<html>
<head>

<style>
pre 
.string  color: green; 
.number  color: darkorange; 
.boolean  color: blue; 
.null  color: magenta; 
.key  color: red; 
</style>

<script>
function output(inp) 
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;


function gethtmlcontents()
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    
        //alert("I am here");
        if(rawFile.readyState === 4)
        
            if(rawFile.status === 200 || rawFile.status == 0)
            
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            
        
    
    rawFile.send(null);


function syntaxHighlight(json) 
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]4|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) 
        var cls = 'number';
        if (/^"/.test(match)) 
            if (/:$/.test(match)) 
                cls = 'key';
             else 
                cls = 'string';
            
         else if (/true|false/.test(match)) 
            cls = 'boolean';
         else if (/null/.test(match)) 
            cls = 'null';
        
        return '<span class="' + cls + '">' + match + '</span>';
    );


gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

【讨论】：

问题是关于 file:// 加载上下文。【参考方案23】：

最简单的方法：将 json 文件保存为 *.js 并作为脚本包含到 html 模板中。

js 文件如下：

let fileJsonData = 
  someField: someValue,
  ...

像这样包含：

...
<script src="./js/jsonData.js"></script>
...

包含后，您可以在全局范围内调用fileJsonData。

【讨论】：

【参考方案24】：

如果您在本地机器上安装了 Python（或者您不介意安装 Python），这里有一个独立于浏览器的解决方法，用于解决我使用的本地 JSON 文件访问问题：

通过创建一个将数据作为 JavaScript 对象返回的函数，将 JSON 文件转换为 JavaScript。然后你可以用

the Python code来了

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'()return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')

【讨论】：

以上是关于加载本地 JSON 文件的主要内容，如果未能解决你的问题，请参考以下文章

加载本地 JSON 文件

Ionic 3 在 android 上加载本地 json 文件失败

将本地 JSON 文件加载到变量中

如何使用 http get 从本地 Json 文件加载数据？

.NETVS 本地调试无法加载Json文件

如何在 D3 中正确加载本地 JSON？

加载本地 JSON 文件

如何使用XMLHttpRequest加载本地的json文件

ES5 版本

ES6 版本

在线演示

如何使用`XMLHttpRequest`加载本地的`json`文件