Javascript 如何在html代码中使用json文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12070631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use json file in html code
提问by saikiran
I have json file mydata.json, and in this file is some json-encoded data.
我有 json 文件mydata.json，在这个文件中是一些 json 编码的数据。
I want obtain this data in file index.htmland process this data in JavaScript. But a don't know how to connect.json file in .html file?
我想在文件中获取这些数据index.html并在 JavaScript 中处理这些数据。但是不知道如何在 .html 文件中连接 .json 文件？
Tell me please. Here is my jsonfile:
请告诉我。这是我的json文件：
{
"items": [
{
"movieID": "65086",
"title": "The Woman in Black",
"poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"
},
{
"movieID": "76726",
"title": "Chronicle",
"poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"
}
]
}
Thinking that I am getting json file from server, how to use that file in my html, so that I can display the data in tables in html page. I am using JavaScript to parse the json file. I am new to this field. Help out please.
认为我是从服务器获取 json 文件，如何在我的 html 中使用该文件，以便我可以在 html 页面的表格中显示数据。我正在使用 JavaScript 来解析 json 文件。我是这个领域的新手。请帮忙。
回答by saikiran
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var people = [];
$.getJSON('people.json', function(data) {
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
"<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
My JSONfile:
我的JSON文件：
{
"person": [
{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"roll": 20
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"roll": 40
}
]
}
I succeeded in integrating a JSONfile to HTMLtable after working a day on it!!!
经过一天的工作，我成功地将JSON文件集成到HTML表中！！！
回答by Nicolas Brown
回答by Javed
You can use JavaScript like...Just give the proper path of your json file...
您可以使用 JavaScript 之类的...只需提供 json 文件的正确路径...
<!doctype html>
<html>
<head>
<script type="text/javascript" src="abc.json"></script>
<script type="text/javascript" >
function load() {
var mydata = JSON.parse(data);
alert(mydata.length);
var div = document.getElementById('data');
for(var i = 0;i < mydata.length; i++)
{
div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
}
}
</script>
</head>
<body onload="load()">
<div id="data">
</div>
</body>
</html>
Simply getting the data and appending it to a div... Initially printing the length in alert.
简单地获取数据并将其附加到一个 div ......最初在警报中打印长度。
Here is my Json file: abc.json
这是我的 Json 文件：abc.json
data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';
