从这个网址: http://api.open-notify.org/astros.json,我试图获取太空中每个人的名字和工艺。我无法让它与我的 URL 一起使用,但它适用于其他人......有什么想法吗?
我的代码:
<html>
<body>
<table id="personDataTable">
<tr>
<th>Name</th>
<th>Craft</th>
</tr>
</table>
<style>
table {
border: 2px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$.ajax({
url: 'http://api.open-notify.org/astros.json',
type: "get",
dataType: "json",
success: function(data) {
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#personDataTable").append(row);
row.append($("<td>" + rowData.people.name + "</td>"));
row.append($("<td>" + rowData.people.craft + "</td>"));
}
</script>
</body>
</html>
如果你注意到JSON结构,它就像下面一样
{"people": [{"craft": "ISS", "name": "Chris Cassidy"}, {"craft": "ISS", "name": "Anatoly Ivanishin"}, {"craft": "ISS", "name": "Ivan Vagner"}, {"craft": "Crew Dragon C206", "name": "Doug Hurley"}, {"craft": "Crew Dragon C206", "name": "Bob Behnken"}], "number": 5, "message": "success"}
你为什么要在函数drawTable
中做data.length
?
它应该data.people.length
在 for 循环和drawRow
中,drawTable
函数应该如下所示
function drawTable(data) {
for (var i = 0; i < data.people.length; i++) {
drawRow(data.people[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#personDataTable").append(row);
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.craft + "</td>"));
}
根据另一个问题,可以在ajax调用的成功函数中简单地获取JSON中的数字
success: function(data) {
var number = data.number; //Like this you can fetch
drawTable(data);
}
你的代码没问题 但是访问值中的一些错误:
名称的总访问权限为 =>data.people[index].name
data"是关键"人"的 Json 对象访问值;
子级"人"是 Json 数组访问值由"索引";
子级别是按键"名称"的 Json 对象访问值;
drawRow(data[i])
=>drawRow(data.people[i])
;
row.append($("<td>" + rowData.people.name + "</td>"));
=>row.append($("<td>" + rowData.name + "</td>"));
注意:HTML中的某种方式通过Let
使用一些变量,然后在浏览器的控制台中尝试查找错误,在这里您可以像下面这样说:
<script>
let myJson; <============ Here
$.ajax({
和
success: function(data) {
myJson = data; <============ Here
drawTable(data);
现在,您可以在浏览器控制台中访问变量"myJson"。
祝你好运