如何在JavaScript中读取外部本地JSON文件?

我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:

{"resource":"A","literals":["B","C","D"]}

假设这是JSON文件的路径:/Users/Documents/workspace/test.json。

谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?

当前回答

正如许多人之前提到的，使用AJAX调用这是行不通的。然而，有一种方法可以绕过它。使用input元素，可以选择您的文件。

所选文件(.json)需要有这样的结构:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

然后你可以使用FileReader()使用JS读取文件:

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

2018-05-30 17:01:19

其他回答

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

2021-11-03 15:26:49

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

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

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

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

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

源

2021-08-08 08:16:29

您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。

一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。

为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:

http://api.jquery.com/jQuery.getJSON/