JSON with JavaScript and HTML



从这个网址: 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"。

祝你好运

最新更新