取决于您的浏览器，您可以访问您的本地文件。但这可能并不适用于应用程序的所有用户。

要做到这一点，您可以尝试这里的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/

一旦你的文件加载，你可以检索数据使用:

var jsonData = JSON.parse(theTextContentOfMyFile);

我已经阅读了上面的内容，并注意到通常在项目中有人想要加载多个json文件。在某些情况下是大量的，在某些情况下是“json文件目录”(否则你必须首先生成一个列表才能下载它们)。如果整个项目都是这样，就会变得很混乱。如果json文件中的数据之间有很多关系，这可能会很麻烦。

显然，这都可以用上面的方法来完成，要么把它们做成.js文件，要么通过某种本地抓取来检索它们。

然而，我发现一个有用的替代方案(如果你不想要一个有层次的服务器端解决方案)是首先在Sql Lite数据库中加载你所有的数据。这使得管理更多的数据也更容易一些，你只有一个文件，所有的数据等等。

然后使用web程序集加载sqlite数据库，然后使用常规查询查询数据客户端。这些都可以在客户端完成

下面是一个例子:https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts(被编译到客户端解决方案的typescript文件)。

在读/写站点中，你可以为每个用户提供一个sqlite数据库，这样你缓存的数据对于该用户是唯一的，等等。

裁判:https://github.com/sql-js/sql.js

首先，创建一个json文件。在这个例子中，我的文件是words.json

[(“点名”:“艾”,“id”:“533”), (“点名”:“kiy”、“id”:“33”)、 (“点名”:“报告”、“id”:“33”)、 (“点名”:“报告”、“id”:“3”), (“点名”:“kiy”、“id”:“35”)、 (“点名”:“kiy”、“id”:“34”)]

这是我的代码，也就是node。js。请注意readFileSync的'utf8'参数:这使得它返回的不是Buffer(尽管JSON。Parse可以处理它)，但是一个字符串。我正在创建一个服务器来查看结果…

var fs=require（'fs'）; var data=fs.readFileSync（'words.json'， 'utf8'）; var words=JSON.parse（data）; var bodyparser=require（'body-parser'）; 控制台.log（字）; var express=require（'express'）; var app=express（）; var server=app.listening（3030，listening）; 函数侦听（）{ console.log（“聆听..”）; } app.use（express.static（'website'））; app.use（bodyparser.urlencoded（{extended：false}））; app.use（bodyparser.json（））;

当你想读取特定的id细节时，你可以把代码提到..

应用程序。得到(' /得到/ res:函数(req, id’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = id req params。)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');

当您作为localhost:3030/get/33输入url时，它将给出与该id相关的详细信息....你也念名字。我的json文件有类似的名称与这段代码，你可以得到一个名称详细信息....它并没有打印所有相似的名字

应用程序。得到(' /得到/ res:函数(req, name’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = req . params名称)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');

如果希望读取类似的名称详细信息，可以使用这段代码。

app.get(/ /名称/:名称,功能(要求,res) { Word = words.filter(函数(val){ 返回val.name === req.params.name; })； res.send(词); console.log(“成功”); })；

如果您想读取文件中的所有信息，请使用下面的代码。

app.get (' / ', sendAll); 函数sendAll(请求、响应){ response.send(单词); ｝

您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。

这个技巧对我很有用(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):)

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

您可以使用d3.js导入JSON文件。在你的html主体上调用d3:

<script src="https://d3js.org/d3.v5.min.js"></script>

然后把这个放在你的js脚本上:

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })

只是想提供另一种方法，因为以上对我来说太复杂了。 适用于我的Chrome版本95.0.4638.54。

只是一些简单的js代码

//读取json文档并删除新行 var object = JSON.stringify(document.activeElement.textContent.replaceAll('\n'， ")); //将字符串解析为json…不知道为什么，但是oje json。解析是不够的。 var json = json .parse(json .parse(对象)); //读取json json.items [0] .contactInfo.firstName / /喜欢

测试json:

{ "items": [ { "type": "test1", "id": "test1", "name": "test1", "entityId": "test1", "active": true, "contactInfo": { "company": "test1", "firstName": "test1", "email": "test1" } }, { "type": "test2", "id": "test2", "name": "test2", "entityId": "test2", "active": true, "contactInfo": { "company": "test2", "firstName": "test2", "email": "test2" } } ] }