既然你有一个web应用程序，你可能有一个客户端和一个服务器。

如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，这意味着您只有客户端。出于安全原因，浏览器不应该允许您这样做。

然而，正如lauhub上面解释的那样，这似乎是有效的:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

另一个解决方案是在你机器的某个地方设置一个web服务器(在windows中很小，在linux中很小)，并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。

您可以使用fetch()在async await的帮助下完成此操作。这是从url获取数据的最新和最安全的方式。

const url = "../asset/videoData.json";

const fetchJson = async () => {
  try {
    const data = await fetch(url);
    const response = await data.json();  
  } catch (error) {
    console.log(error);
  }
 };

你也可以使用它从外部url获取数据。

要使用javascript读取外部本地JSON文件(data. JSON)，首先要创建数据。json文件:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

然后,

在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);

有关更多信息，请参阅此参考资料。

我已经阅读了上面的内容，并注意到通常在项目中有人想要加载多个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

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

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

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

var jsonData = JSON.parse(theTextContentOfMyFile);

只是想提供另一种方法，因为以上对我来说太复杂了。 适用于我的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" } } ] }