我已经在我的本地系统中保存了一个JSON文件,并创建了一个JavaScript文件,以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
我已经在我的本地系统中保存了一个JSON文件,并创建了一个JavaScript文件,以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
如果你能运行本地web服务器(就像Chris P上面建议的那样),如果你能使用jQuery,你可以试试http://api.jquery.com/jQuery.getJSON/
其他回答
只是想提供另一种方法,因为以上对我来说太复杂了。 适用于我的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" } } ] }
您可以使用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
})
一个简单的解决方法是将JSON文件放在本地运行的服务器中。为此,从终端转到您的项目文件夹,并在某些端口号上启动本地服务器,例如8181
python -m SimpleHTTPServer 8181
然后浏览到http://localhost:8181/应该会显示您的所有文件,包括JSON。如果您还没有安装python,请记住安装python。
取决于您的浏览器,您可以访问您的本地文件。但这可能并不适用于应用程序的所有用户。
要做到这一点,您可以尝试这里的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/
一旦你的文件加载,你可以检索数据使用:
var jsonData = JSON.parse(theTextContentOfMyFile);
当在Node.js中或在浏览器中使用require.js时,你可以简单地做:
let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
注意:文件加载一次,后续调用将使用缓存。