要使用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

2021解决方案(适用于Chrome 91+)

导入JSON文件的JS文件应该是一个模块:

<script type=“module” src=“script.js”></script>

然后在script.js中导入json文件:

从"./data "导入数据。Json: assert {type: " Json "};

您可以使用console.log(data)检查数据是否已加载

源

非常简单。 将json文件重命名为“.js”而不是“.json”。

<script type="text/javascript" src="my_json.js"></script>

所以正常地遵循你的代码。

<script type="text/javascript">
var obj = JSON.parse(contacts);

然而，只是为了信息，我的json内容看起来像下面的剪辑。

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

使用jQuery和ajax可以很好地读取JSON文件和操作数据

    $(document).ready(function () {
        $.ajax({
            url: 'country.json',
            type: 'GET',
            dataType: 'json',
            success: function (code, statut) {
                for (let i in code) {
                    console.log(i)
                           }

            }
        });
    });

从硬盘加载.json文件是一个异步操作，因此它需要指定一个回调函数在文件加载后执行。

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

这个函数也适用于加载。html或。txt文件，通过覆盖mime类型参数为"text/html"， "text/plain"等。