我已经在我的本地系统中保存了一个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打印数据?
当前回答
一个简单的解决方法是将JSON文件放在本地运行的服务器中。为此,从终端转到您的项目文件夹,并在某些端口号上启动本地服务器,例如8181
python -m SimpleHTTPServer 8181
然后浏览到http://localhost:8181/应该会显示您的所有文件,包括JSON。如果您还没有安装python,请记住安装python。
其他回答
要使用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);
有关更多信息,请参阅此参考资料。
只需使用$。getJSON和$。迭代Key /value对。 JSON文件和函数代码的内容示例:
{
{
"key": "INFO",
"value": "This is an example."
}
}
var url = "file.json";
$.getJSON(url, function (data) {
$.each(data, function (key, model) {
if (model.key == "INFO") {
console.log(model.value)
}
})
});
上面提到的所有解决方案只有在本地主机上运行本地web服务器时才有效。如果你想要在没有web服务器的情况下实现这一点,你可能需要通过使用文件上传控制来手动上传JSON文件。由于安全风险,如果没有本地服务器,浏览器将不提供此功能。
你也可以在没有本地服务器的情况下解析上传的文件。这里是示例代码,我已经实现了一个解决类似的问题。
<div id="content">
<input type="file" name="inputfile" id="inputfile">
<br>
<h2>
<pre id="output"></pre>
</h2>
</div>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
console.log(parsedJSON);
// your code to consume the json
}
fileReader.readAsText(this.files[0]);
})
</script>
在我的情况下,我想读取一个本地JSON文件,并在桌面上的html文件中显示它,这就是我所要做的。
注意:不要尝试使用JavaScript自动上传文件,由于浏览器施加的安全限制,即使这样做也是不允许的。
您可以使用D3来处理回调,并加载本地JSON文件数据。Json,如下所示:
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.json("data.json", function(error, data) {
if (error)
throw error;
console.log(data);
});
</script>
您不能对本地资源进行AJAX调用,因为请求是使用HTTP发出的。
一个解决方案是运行一个本地web服务器,提供文件并对localhost进行AJAX调用。
为了帮助你编写代码来读取JSON,你应该阅读jQuery.getJSON()的文档:
http://api.jquery.com/jQuery.getJSON/